<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 3.4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest (the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- Head BEGIN -->
<head>
<meta charset="utf-8">
<title>Buttons | Metronic Frontend
</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="Metronic Shop UI description" name="description">
<meta content="Metronic Shop UI keywords" name="keywords">
<meta content="keenthemes" name="author">
<meta property="og:site_name" content="-CUSTOMER VALUE-">
<meta property="og:title" content="-CUSTOMER VALUE-">
<meta property="og:description" content="-CUSTOMER VALUE-">
<meta property="og:type" content="website">
<meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
<meta property="og:url" content="-CUSTOMER VALUE-">
<link rel="shortcut icon" href="favicon.ico">
<!-- Fonts START -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css">
<!-- Fonts END -->
<!-- Global styles START -->
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Global styles END -->
<!-- Page level plugin styles START -->
<link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
<!-- Page level plugin styles END -->
<!-- Theme styles START -->
<link href="../../assets/global/css/components.css" rel="stylesheet">
<link href="../../assets/global/css/plugins.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
<link href="../../assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
<link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
<!-- Theme styles END -->
</head>
<!-- Head END -->
<!-- Body BEGIN -->
<body class="corporate">
<!-- BEGIN STYLE CUSTOMIZER -->
<div class="color-panel hidden-sm">
<div class="color-mode-icons icon-color"></div>
<div class="color-mode-icons icon-color-close"></div>
<div class="color-mode">
<p>THEME COLOR
</p>
<ul class="inline">
<li class="color-red current color-default" data-style="red"></li>
<li class="color-blue" data-style="blue"></li>
<li class="color-green" data-style="green"></li>
<li class="color-orange" data-style="orange"></li>
<li class="color-gray" data-style="gray"></li>
<li class="color-turquoise" data-style="turquoise"></li>
</ul>
</div>
</div>
<!-- END BEGIN STYLE CUSTOMIZER -->
<!-- BEGIN TOP BAR -->
<div class="pre-header">
<div class="container">
<div class="row">
<!-- BEGIN TOP BAR LEFT PART -->
<div class="col-md-6 col-sm-6 additional-shop-info">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-phone"></i><span>+1 456 6717
</span></li>
<li><i class="fa fa-envelope-o"></i><span>info@keenthemes.com
</span></li>
</ul>
</div>
<!-- END TOP BAR LEFT PART -->
<!-- BEGIN TOP BAR MENU -->
<div class="col-md-6 col-sm-6 additional-nav">
<ul class="list-unstyled list-inline pull-right">
<li><a href="page-login.html">Log In
</a></li>
<li><a href="page-reg-page.html">Registration
</a></li>
</ul>
</div>
<!-- END TOP BAR MENU -->
</div>
</div>
</div>
<!-- END TOP BAR -->
<!-- BEGIN HEADER -->
<div class="header">
<div class="container">
<a class="site-logo" href="index.html"><img src="../../assets/frontend/layout/img/logos/logo-corp-red.png" alt="Metronic FrontEnd"></a>
<a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>
<!-- BEGIN NAVIGATION -->
<div class="header-navigation pull-right font-transform-inherit">
<ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Home
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Home Default
</a></li>
<li><a href="index-header-fix.html">Home with Header Fixed
</a></li>
<li><a href="index-without-topbar.html">Home without Top Bar
</a></li>
</ul>
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Mega Menu
</a>
<ul class="dropdown-menu">
<li>
<div class="header-navigation-content">
<div class="row">
<div class="col-md-4 header-navigation-col">
<h4>Footwear
</h4>
<ul>
<li><a href="index.html">Astro Trainers
</a></li>
<li><a href="index.html">Basketball Shoes
</a></li>
<li><a href="index.html">Boots
</a></li>
<li><a href="index.html">Canvas Shoes
</a></li>
<li><a href="index.html">Football Boots
</a></li>
<li><a href="index.html">Golf Shoes
</a></li>
<li><a href="index.html">Hi Tops
</a></li>
<li><a href="index.html">Indoor Trainers
</a></li>
</ul>
</div>
<div class="col-md-4 header-navigation-col">
<h4>Clothing
</h4>
<ul>
<li><a href="index.html">Base Layer
</a></li>
<li><a href="index.html">Character
</a></li>
<li><a href="index.html">Chinos
</a></li>
<li><a href="index.html">Combats
</a></li>
<li><a href="index.html">Cricket Clothing
</a></li>
<li><a href="index.html">Fleeces
</a></li>
<li><a href="index.html">Gilets
</a></li>
<li><a href="index.html">Golf Tops
</a></li>
</ul>
</div>
<div class="col-md-4 header-navigation-col">
<h4>Accessories
</h4>
<ul>
<li><a href="index.html">Belts
</a></li>
<li><a href="index.html">Caps
</a></li>
<li><a href="index.html">Gloves
</a></li>
</ul>
<h4>Clearance
</h4>
<ul>
<li><a href="index.html">Jackets
</a></li>
<li><a href="index.html">Bottoms
</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Pages
</a>
<ul class="dropdown-menu">
<li><a href="page-about.html">About Us
</a></li>
<li><a href="page-services.html">Services
</a></li>
<li><a href="page-prices.html">Prices
</a></li>
<li><a href="page-faq.html">FAQ
</a></li>
<li><a href="page-gallery.html">Gallery
</a></li>
<li><a href="page-search-result.html">Search Result
</a></li>
<li><a href="page-404.html">404
</a></li>
<li><a href="page-500.html">500
</a></li>
<li><a href="page-login.html">Login Page
</a></li>
<li><a href="page-forgotton-password.html">Forget Password
</a></li>
<li><a href="page-reg-page.html">Signup Page
</a></li>
<li><a href="page-careers.html">Careers
</a></li>
<li><a href="page-site-map.html">Site Map
</a></li>
<li><a href="page-contacts.html">Contact
</a></li>
</ul>
</li>
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Features
</a>
<ul class="dropdown-menu">
<li><a href="feature-typography.html">Typography
</a></li>
<li class="active"><a href="feature-buttons.html">Buttons
</a></li>
<li><a href="feature-forms.html">Forms
</a></li>
<li class="dropdown-submenu">
<a href="index.html">Multi level
<i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="index.html">Second Level Link
</a></li>
<li><a href="index.html">Second Level Link
</a></li>
<li class="dropdown-submenu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Second Level Link
<i class="fa fa-angle-right"></i>
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Third Level Link
</a></li>
<li><a href="index.html">Third Level Link
</a></li>
<li><a href="index.html">Third Level Link
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Portfolio
</a>
<ul class="dropdown-menu">
<li><a href="portfolio-4.html">Portfolio 4
</a></li>
<li><a href="portfolio-3.html">Portfolio 3
</a></li>
<li><a href="portfolio-2.html">Portfolio 2
</a></li>
<li><a href="portfolio-item.html">Portfolio Item
</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Blog
</a>
<ul class="dropdown-menu">
<li><a href="blog.html">Blog Page
</a></li>
<li><a href="blog-item.html">Blog Item
</a></li>
</ul>
</li>
<li><a href="shop-index.html" target="_blank">E-Commerce
</a></li>
<li><a href="onepage-index.html" target="_blank">One Page
</a></li>
<li><a href="http://keenthemes.com/preview/metronic/theme/templates/admin" target="_blank">Admin theme
</a></li>
<!-- BEGIN TOP SEARCH -->
<li class="menu-search">
<span class="sep"></span>
<i class="fa fa-search search-btn"></i>
<div class="search-box">
<form action="#">
<div class="input-group">
<input type="text" placeholder="Search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search
</button>
</span>
</div>
</form>
</div>
</li>
<!-- END TOP SEARCH -->
</ul>
</div>
<!-- END NAVIGATION -->
</div>
</div>
<!-- Header END -->
<div class="main">
<div class="container">
<ul class="breadcrumb">
<li><a href="index.html">Home
</a></li>
<li><a href="#">Features
</a></li>
<li class="active">Buttons
</li>
</ul>
<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-40">
<!-- BEGIN CONTENT -->
<div class="col-md-12 col-sm-12">
<h1>Buttons
</h1>
<div class="content-page">
<div class="note note-success">
<h4 class="block">Metronic Admin (Framework) Features
</h4>
<p>
In the frontend theme you can use nearly all the features from
<a href="http://keenthemes.com/preview/metronic_admin/" target="_blanl">Metronic Admin Theme
</a>. First you will just need to include 2 below global css files:
</p>
<p>
<code>../../assets/global/css/components.css
</code><br>
<code>../../assets/global/css/plugins.css
</code>
</p>
<p>
And selected plugin's css and js files accordingly.
</p>
</div>
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-6">
<!-- BEGIN BUTTONS PORTLET-->
<div class="portlet box green ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Buttons
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body util-btn-margin-bottom-5">
<div class="clearfix">
<h4 class="block">Default Bootstrap Buttons(Customized to Match Theme Style)
</h4>
<!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default
</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary
</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success
</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info
</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning
</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger
</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link
</button>
</div>
<div class="clearfix">
<h4 class="block">Metronic Style Buttons
</h4>
<button type="button" class="btn default">Default
</button>
<button type="button" class="btn red">Red
</button>
<button type="button" class="btn blue">Blue
</button>
<button type="button" class="btn green">Green
</button>
<button type="button" class="btn yellow">Yellow
</button>
<button type="button" class="btn purple">Purple
</button>
<button type="button" class="btn dark">Dark
</button>
</div>
<div class="clearfix">
<h4 class="block">More Button Colors(go to
<a href="ui_colors.html">ui_colors.html
</a> for more colors)
</h4>
<button type="button" class="btn blue-hoki">Blue Hoki
</button>
<button type="button" class="btn blue-madison">Blue Madison
</button>
<button type="button" class="btn green-meadow">Green Meadow
</button>
<button type="button" class="btn red-sunglo">Red Sunglo
</button>
<button type="button" class="btn yellow-crusta">Yellow Crusta
</button>
<button type="button" class="btn purple-plum">Purple Plum
</button>
<button type="button" class="btn grey-cascade">Grey Cascade
</button>
</div>
<div class="clearfix">
<h4 class="block">Button Stripe
</h4>
<a href="#" class="btn default red-stripe">
Red
</a>
<a href="#" class="btn default blue-stripe">
Blue
</a>
<a href="#" class="btn default green-stripe">
Green
</a>
<a href="#" class="btn default yellow-stripe">
Yellow
</a>
<a href="#" class="btn default purple-stripe">
Purple
</a>
<a href="#" class="btn default green-stripe">
Green
</a>
<a href="#" class="btn default dark-stripe">
Dark
</a>
</div>
<div class="clearfix">
<h4 class="block">Disabled
</h4>
<a href="#" class="btn default disabled">
Default
</a>
<a href="#" class="btn red disabled">
Red
</a>
<a href="#" class="btn blue disabled">
Blue
</a>
<a href="#" class="btn green disabled">
Green
</a>
<a href="#" class="btn yellow disabled">
Yellow
</a>
<a href="#" class="btn purple disabled">
Purple
</a>
<a href="#" class="btn dark disabled">
Dark
</a>
</div>
<div class="clearfix">
<h4 class="block">Button Sizes
</h4>
<button type="button" class="btn default btn-lg">Large button
</button>
<button type="button" class="btn red">Default button
</button>
<button type="button" class="btn blue btn-sm">Small button
</button>
<button type="button" class="btn green btn-xs">Extra small button
</button>
</div>
<div class="clearfix">
<h4 class="block">Button Tags
</h4>
<a href="#" class="btn default">
Link
</a>
<button class="btn default">Button
</button>
<input type="button" class="btn default" value="Input">
<input type="submit" class="btn default" value="Submit">
</div>
<div class="clearfix">
<h4 class="block">Block Buttons
</h4>
<a href="#" class="btn default btn-block">
Link
</a>
<button class="btn blue btn-block">Button
</button>
<input type="button" class="btn red btn-block" value="Input">
<input type="submit" class="btn purple btn-block" value="Submit">
</div>
</div>
</div>
<!-- END BUTTONS PORTLET-->
<!-- BEGIN BUTTONS WITH ICONS PORTLET-->
<div class="portlet box red-pink tabbable">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
<span class="hidden-480">
Icon Buttons
</span>
</div>
</div>
<div class="portlet-body util-btn-margin-bottom-5">
<div class="tabbable portlet-tabs">
<ul class="nav nav-tabs" style="display: none;">
<li>
<a href="#buttons_metro" data-toggle="tab">
Metro
</a>
</li>
<li>
<a href="#dropdown_glyphicon" data-toggle="tab">
Glyphicon
</a>
</li>
<li class="active">
<a href="#dropdown_fontawesome" data-toggle="tab">
Fontawesome
</a>
</li>
</ul>
<div class="tab-content" style="clear: both;">
<div class="tab-pane active" id="dropdown_fontawesome">
<div class="clearfix">
<h4 class="block">Large Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn btn-lg default">
Default
<i class="fa fa-user"></i>
</a>
<a href="#" class="btn btn-lg red">
Red
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn btn-lg blue">
<i class="fa fa-file-o"></i> Blue
</a>
<a href="#" class="btn btn-lg green">
Green
<i class="fa fa-font"></i>
</a>
<a href="#" class="btn btn-lg yellow">
Yellow
<i class="fa fa-search"></i>
</a>
<a href="#" class="btn btn-lg purple">
<i class="fa fa-times"></i> Purple
</a>
<a href="#" class="btn btn-lg green">
Green
<i class="fa fa-plus"></i>
</a>
<a href="#" class="btn btn-lg dark">
Dark
<i class="fa fa-link"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Default Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn default">
Default
<i class="fa fa-user"></i>
</a>
<a href="#" class="btn red">
Red
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn blue">
<i class="fa fa-file-o"></i> Blue
</a>
<a href="#" class="btn green">
Green
<i class="fa fa-font"></i>
</a>
<a href="#" class="btn yellow">
Yellow
<i class="fa fa-search"></i>
</a>
<a href="#" class="btn purple">
<i class="fa fa-times"></i> Purple
</a>
<a href="#" class="btn green">
Green
<i class="fa fa-plus"></i>
</a>
<a href="#" class="btn dark">
Dark
<i class="fa fa-link"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Small Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn btn-sm default">
Default
<i class="fa fa-user"></i>
</a>
<a href="#" class="btn btn-sm red">
Red
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn btn-sm blue">
<i class="fa fa-file-o"></i> Blue
</a>
<a href="#" class="btn btn-sm green">
Green
<i class="fa fa-font"></i>
</a>
<a href="#" class="btn btn-sm yellow">
Yellow
<i class="fa fa-search"></i>
</a>
<a href="#" class="btn btn-sm purple">
<i class="fa fa-times"></i> Purple
</a>
<a href="#" class="btn btn-sm green">
Green
<i class="fa fa-plus"></i>
</a>
<a href="#" class="btn btn-sm dark">
Dark
<i class="fa fa-link"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Extra Small Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn btn-xs default">
Default
<i class="fa fa-user"></i>
</a>
<a href="#" class="btn btn-xs red">
Red
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn btn-xs blue">
<i class="fa fa-file-o"></i> Blue
</a>
<a href="#" class="btn btn-xs green">
Green
<i class="fa fa-font"></i>
</a>
<a href="#" class="btn btn-xs yellow">
Yellow
<i class="fa fa-search"></i>
</a>
<a href="#" class="btn btn-xs purple">
<i class="fa fa-times"></i> Purple
</a>
<a href="#" class="btn btn-xs green">
Green
<i class="fa fa-plus"></i>
</a>
<a href="#" class="btn btn-xs dark">
Dark
<i class="fa fa-link"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Font Awesome Icon Only Buttons
</h4>
<a href="#" class="btn default">
<i class="fa fa-user"></i>
</a>
<a href="#" class="btn red">
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn blue">
<i class="fa fa-file-o"></i>
</a>
<a href="#" class="btn green">
<i class="fa fa-font"></i>
</a>
<a href="#" class="btn yellow">
<i class="fa fa-search"></i>
</a>
<a href="#" class="btn purple">
<i class="fa fa-times"></i>
</a>
<a href="#" class="btn green">
<i class="fa fa-plus"></i>
</a>
<a href="#" class="btn dark">
<i class="fa fa-link"></i>
</a>
</div>
</div>
<div class="tab-pane" id="dropdown_glyphicon">
<div class="clearfix">
<h4 class="block">Large Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn btn-lg default">
Default
<span class="glyphicon glyphicon-cog">
</span>
</a>
<a href="#" class="btn btn-lg red">
Red
<span class="glyphicon glyphicon-calendar">
</span>
</a>
<a href="#" class="btn btn-lg blue">
<span class="glyphicon glyphicon-font">
</span>
Blue
</a>
<a href="#" class="btn btn-lg green">
Green
<span class="glyphicon glyphicon-gift">
</span>
</a>
<a href="#" class="btn btn-lg yellow">
Yellow
<span class="glyphicon glyphicon-pencil">
</span>
</a>
<a href="#" class="btn btn-lg purple">
<span class="glyphicon glyphicon-tag">
</span>
Purple
</a>
<a href="#" class="btn btn-lg green">
Green
<span class="glyphicon glyphicon-user">
</span>
</a>
<a href="#" class="btn btn-lg dark">
Dark
<span class="glyphicon glyphicon-link">
</span>
</a>
</div>
<div class="clearfix">
<h4 class="block">Default Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn default">
Default
<span class="glyphicon glyphicon-cog">
</span>
</a>
<a href="#" class="btn red">
Red
<span class="glyphicon glyphicon-calendar">
</span>
</a>
<a href="#" class="btn blue">
<span class="glyphicon glyphicon-font">
</span>
Blue
</a>
<a href="#" class="btn green">
Green
<span class="glyphicon glyphicon-gift">
</span>
</a>
<a href="#" class="btn yellow">
Yellow
<span class="glyphicon glyphicon-pencil">
</span>
</a>
<a href="#" class="btn purple">
<span class="glyphicon glyphicon-tag">
</span>
Purple
</a>
<a href="#" class="btn green">
Green
<span class="glyphicon glyphicon-user">
</span>
</a>
<a href="#" class="btn dark">
Dark
<span class="glyphicon glyphicon-link">
</span>
</a>
</div>
<div class="clearfix">
<h4 class="block">Small Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn btn-sm default">
Default
<span class="glyphicon glyphicon-cog">
</span>
</a>
<a href="#" class="btn btn-sm red">
Red
<span class="glyphicon glyphicon-calendar">
</span>
</a>
<a href="#" class="btn btn-sm blue">
<span class="glyphicon glyphicon-font">
</span>
Blue
</a>
<a href="#" class="btn btn-sm green">
Green
<span class="glyphicon glyphicon-gift">
</span>
</a>
<a href="#" class="btn btn-sm yellow">
Yellow
<span class="glyphicon glyphicon-pencil">
</span>
</a>
<a href="#" class="btn btn-sm purple">
<span class="glyphicon glyphicon-tag">
</span>
Purple
</a>
<a href="#" class="btn btn-sm green">
Green
<span class="glyphicon glyphicon-user">
</span>
</a>
<a href="#" class="btn btn-sm dark">
Dark
<span class="glyphicon glyphicon-link">
</span>
</a>
</div>
<div class="clearfix">
<h4 class="block">Extra Small Buttons with Font Awesome Icons
</h4>
<a href="#" class="btn btn-xs default">
Default
<span class="glyphicon glyphicon-cog">
</span>
</a>
<a href="#" class="btn btn-xs red">
Red
<span class="glyphicon glyphicon-calendar">
</span>
</a>
<a href="#" class="btn btn-xs blue">
<span class="glyphicon glyphicon-font">
</span>
Blue
</a>
<a href="#" class="btn btn-xs green">
Green
<span class="glyphicon glyphicon-gift">
</span>
</a>
<a href="#" class="btn btn-xs yellow">
Yellow
<span class="glyphicon glyphicon-pencil">
</span>
</a>
<a href="#" class="btn btn-xs purple">
<span class="glyphicon glyphicon-tag">
</span>
Purple
</a>
<a href="#" class="btn btn-xs green">
Green
<span class="glyphicon glyphicon-user">
</span>
</a>
<a href="#" class="btn btn-xs dark">
Dark
<span class="glyphicon glyphicon-link">
</span>
</a>
</div>
<div class="clearfix">
<h4 class="block">Font Awesome Icon Only Buttons
</h4>
<a href="#" class="btn default">
<span class="glyphicon glyphicon-cog">
</span>
</a>
<a href="#" class="btn red">
<span class="glyphicon glyphicon-calendar">
</span>
</a>
<a href="#" class="btn blue">
<span class="glyphicon glyphicon-font">
</span>
</a>
<a href="#" class="btn green">
<span class="glyphicon glyphicon-gift">
</span>
</a>
<a href="#" class="btn yellow">
<span class="glyphicon glyphicon-pencil">
</span>
</a>
<a href="#" class="btn purple">
<span class="glyphicon glyphicon-tag">
</span>
</a>
<a href="#" class="btn green">
<span class="glyphicon glyphicon-user">
</span>
</a>
<a href="#" class="btn dark">
<span class="glyphicon glyphicon-link">
</span>
</a>
</div>
</div>
<div class="tab-pane " id="buttons_metro">
<div class="clearfix">
<h4 class="block">Navigation Large Icons Buttons
</h4>
<a href="#" class="btn btn-lg default m-icon-big">
Submit
<i class="m-icon-big-swapleft"></i>
</a>
<a href="#" class="btn btn-lg green m-icon-big">
Submit
<i class="m-icon-big-swapright m-icon-white"></i>
</a>
<a href="#" class="btn btn-lg blue m-icon-big">
Submit
<i class="m-icon-big-swapdown m-icon-white"></i>
</a>
<a href="#" class="btn btn-lg dark m-icon-big">
Submit
<i class="m-icon-big-swapup m-icon-white"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Navigation Large Icons Only Buttons
</h4>
<a href="#" class="btn btn-lg default m-icon-big m-icon-only">
<i class="m-icon-big-swapleft"></i>
</a>
<a href="#" class="btn btn-lg green m-icon-big m-icon-only">
<i class="m-icon-big-swapright m-icon-white"></i>
</a>
<a href="#" class="btn btn-lg blue m-icon-big m-icon-only">
<i class="m-icon-big-swapdown m-icon-white"></i>
</a>
<a href="#" class="btn btn-lg dark m-icon-big m-icon-only">
<i class="m-icon-big-swapup m-icon-white"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Navigation Block Large Icons
</h4>
<button class="btn blue btn-block btn-lg m-icon-big">Button
<i class="m-icon-big-swapright m-icon-white"></i></button>
<a href="#" class="btn green btn-block btn-lg m-icon-big">
Link
<i class="m-icon-big-swapright m-icon-white"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Navigation Defualt Icons Buttons
</h4>
<a href="#" class="btn default m-icon">
Submit
<i class="m-icon-swapleft"></i>
</a>
<a href="#" class="btn green m-icon">
Submit
<i class="m-icon-swapright m-icon-white"></i>
</a>
<a href="#" class="btn blue m-icon">
Submit
<i class="m-icon-swapdown m-icon-white"></i>
</a>
<a href="#" class="btn dark m-icon">
Submit
<i class="m-icon-swapup m-icon-white"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Navigation Defualt Icons Only Buttons
</h4>
<a href="#" class="btn default m-icon m-icon-only">
<i class="m-icon-swapleft"></i>
</a>
<a href="#" class="btn green m-icon m-icon-only">
<i class="m-icon-swapright m-icon-white"></i>
</a>
<a href="#" class="btn blue m-icon m-icon-only">
<i class="m-icon-swapdown m-icon-white"></i>
</a>
<a href="#" class="btn dark m-icon m-icon-only">
<i class="m-icon-swapup m-icon-white"></i>
</a>
</div>
<div class="clearfix">
<h4 class="block">Navigation Block Defualt Icons
</h4>
<button class="btn blue btn-block m-icon">Button
<i class="m-icon-swapright m-icon-white"></i></button>
<a href="#" class="btn green btn-block m-icon">
Link
<i class="m-icon-swapright m-icon-white"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END BUTTONS WITH ICONS PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Font Awesome Styled Buttons
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<a href="#" class="icon-btn">
<i class="fa fa-group"></i>
<div>
Users
</div>
<span class="badge badge-important">
2
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-barcode"></i>
<div>
Products
</div>
<span class="badge badge-success">
4
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-bar-chart-o"></i>
<div>
Reports
</div>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-sitemap"></i>
<div>
Categories
</div>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-calendar"></i>
<div>
Calendar
</div>
<span class="badge badge-success">
4
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-envelope"></i>
<div>
Inbox
</div>
<span class="badge badge-info">
12
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-bullhorn"></i>
<div>
Notification
</div>
<span class="badge badge-important">
3
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-map-marker"></i>
<div>
Locations
</div>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-money"><i></i></i>
<div>
Finance
</div>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-plane"></i>
<div>
Projects
</div>
<span class="badge badge-info">
21
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-thumbs-up"></i>
<div>
Feedback
</div>
<span class="badge badge-info">
2
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-cloud"></i>
<div>
Servers
</div>
<span class="badge badge-important">
2
</span>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-globe"></i>
<div>
Regions
</div>
</a>
<a href="#" class="icon-btn">
<i class="fa fa-heart-o"></i>
<div>
Popularity
</div>
<span class="badge badge-info">
221
</span>
</a>
</div>
</div>
<!-- BEGIN BLOCK BUTTONS PORTLET-->
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>List Social Icons(UL)
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body util-btn-margin-bottom-5">
<ul class="social-icons">
<li>
<a href="#" data-original-title="amazon" class="amazon">
</a>
</li>
<li>
<a href="#" data-original-title="behance" class="behance">
</a>
</li>
<li>
<a href="#" data-original-title="blogger" class="blogger">
</a>
</li>
<li>
<a href="#" data-original-title="deviantart" class="deviantart">
</a>
</li>
<li>
<a href="#" data-original-title="dribbble" class="dribbble">
</a>
</li>
<li>
<a href="#" data-original-title="dropbox" class="dropbox">
</a>
</li>
<li>
<a href="#" data-original-title="facebook" class="facebook">
</a>
</li>
<li>
<a href="#" data-original-title="forrst" class="forrst">
</a>
</li>
<li>
<a href="#" data-original-title="github" class="github">
</a>
</li>
<li>
<a href="#" data-original-title="Goole Plus" class="googleplus">
</a>
</li>
<li>
<a href="#" data-original-title="jolicloud" class="jolicloud">
</a>
</li>
<li>
<a href="#" data-original-title="last-fm" class="last-fm">
</a>
</li>
<li>
<a href="#" data-original-title="linkedin" class="linkedin">
</a>
</li>
<li>
<a href="#" data-original-title="picasa" class="picasa">
</a>
</li>
<li>
<a href="#" data-original-title="pintrest" class="pintrest">
</a>
</li>
<li>
<a href="#" data-original-title="rss" class="rss">
</a>
</li>
<li>
<a href="#" data-original-title="skype" class="skype">
</a>
</li>
<li>
<a href="#" data-original-title="spotify" class="spotify">
</a>
</li>
<li>
<a href="#" data-original-title="stumbleupon" class="stumbleupon">
</a>
</li>
<li>
<a href="#" data-original-title="tumblr" class="tumblr">
</a>
</li>
<li>
<a href="#" data-original-title="twitter" class="twitter">
</a>
</li>
<li>
<a href="#" data-original-title="vimeo" class="vimeo">
</a>
</li>
<li>
<a href="#" data-original-title="wordpress" class="wordpress">
</a>
</li>
<li>
<a href="#" data-original-title="xing" class="xing">
</a>
</li>
<li>
<a href="#" data-original-title="yahoo" class="yahoo">
</a>
</li>
<li>
<a href="#" data-original-title="youtube" class="youtube">
</a>
</li>
<li>
<a href="#" data-original-title="vk" class="vk">
</a>
</li>
<li>
<a href="#" data-original-title="instagram" class="instagram">
</a>
</li>
<li>
<a href="#" data-original-title="reddit" class="reddit">
</a>
</li>
<li>
<a href="#" data-original-title="aboutme" class="aboutme">
</a>
</li>
<li>
<a href="#" data-original-title="flickr" class="flickr">
</a>
</li>
<li>
<a href="#" data-original-title="foursquare" class="foursquare">
</a>
</li>
<li>
<a href="#" data-original-title="gravatar" class="gravatar">
</a>
</li>
<li>
<a href="#" data-original-title="klout" class="klout">
</a>
</li>
<li>
<a href="#" data-original-title="myspace" class="myspace">
</a>
</li>
<li>
<a href="#" data-original-title="quora" class="quora">
</a>
</li>
</ul>
</div>
</div>
<!-- END BLOCK BUTTONS PORTLET-->
<!-- BEGIN BLOCK BUTTONS PORTLET-->
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Inline Social Icons
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body util-btn-margin-bottom-5">
<a href="#" data-original-title="amazon" class="social-icon amazon">
</a>
<a href="#" data-original-title="behance" class="social-icon behance">
</a>
<a href="#" data-original-title="blogger" class="social-icon blogger">
</a>
<a href="#" data-original-title="deviantart" class="social-icon deviantart">
</a>
<a href="#" data-original-title="dribbble" class="social-icon dribbble">
</a>
<a href="#" data-original-title="dropbox" class="social-icon dropbox">
</a>
<a href="#" data-original-title="facebook" class="social-icon facebook">
</a>
<a href="#" data-original-title="forrst" class="social-icon forrst">
</a>
<a href="#" data-original-title="github" class="social-icon github">
</a>
<a href="#" data-original-title="Goole Plus" class="social-icon googleplus">
</a>
<a href="#" data-original-title="jolicloud" class="social-icon jolicloud">
</a>
<a href="#" data-original-title="last-fm" class="social-icon last-fm">
</a>
<a href="#" data-original-title="linkedin" class="social-icon linkedin">
</a>
<a href="#" data-original-title="picasa" class="social-icon picasa">
</a>
<a href="#" data-original-title="pintrest" class="social-icon pintrest">
</a>
<a href="#" data-original-title="rss" class="social-icon rss">
</a>
<a href="#" data-original-title="skype" class="social-icon skype">
</a>
<a href="#" data-original-title="spotify" class="social-icon spotify">
</a>
<a href="#" data-original-title="stumbleupon" class="social-icon stumbleupon">
</a>
<a href="#" data-original-title="tumblr" class="social-icon tumblr">
</a>
<a href="#" data-original-title="twitter" class="social-icon twitter">
</a>
<a href="#" data-original-title="vimeo" class="social-icon vimeo">
</a>
<a href="#" data-original-title="wordpress" class="social-icon wordpress">
</a>
<a href="#" data-original-title="xing" class="social-icon xing">
</a>
<a href="#" data-original-title="yahoo" class="social-icon yahoo">
</a>
<a href="#" data-original-title="youtube" class="social-icon youtube">
</a>
<a href="#" data-original-title="vk" class="social-icon vk">
</a>
<a href="#" data-original-title="instagram" class="social-icon instagram">
</a>
<a href="#" data-original-title="reddit" class="social-icon reddit">
</a>
<a href="#" data-original-title="aboutme" class="social-icon aboutme">
</a>
<a href="#" data-original-title="flickr" class="social-icon flickr">
</a>
<a href="#" data-original-title="foursquare" class="social-icon foursquare">
</a>
<a href="#" data-original-title="gravatar" class="social-icon gravatar">
</a>
<a href="#" data-original-title="klout" class="social-icon klout">
</a>
<a href="#" data-original-title="myspace" class="social-icon myspace">
</a>
<a href="#" data-original-title="quora" class="social-icon quora">
</a>
</div>
</div>
<!-- END BLOCK BUTTONS PORTLET-->
<!-- BEGIN BLOCK BUTTONS PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Social Icons(Colored)
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<ul class="social-icons social-icons-color">
<li>
<a href="#" data-original-title="amazon" class="amazon">
</a>
</li>
<li>
<a href="#" data-original-title="behance" class="behance">
</a>
</li>
<li>
<a href="#" data-original-title="blogger" class="blogger">
</a>
</li>
<li>
<a href="#" data-original-title="deviantart" class="deviantart">
</a>
</li>
<li>
<a href="#" data-original-title="dribbble" class="dribbble">
</a>
</li>
<li>
<a href="#" data-original-title="dropbox" class="dropbox">
</a>
</li>
<li>
<a href="#" data-original-title="facebook" class="facebook">
</a>
</li>
<li>
<a href="#" data-original-title="forrst" class="forrst">
</a>
</li>
<li>
<a href="#" data-original-title="github" class="github">
</a>
</li>
<li>
<a href="#" data-original-title="Goole Plus" class="googleplus">
</a>
</li>
<li>
<a href="#" data-original-title="jolicloud" class="jolicloud">
</a>
</li>
<li>
<a href="#" data-original-title="last-fm" class="last-fm">
</a>
</li>
<li>
<a href="#" data-original-title="linkedin" class="linkedin">
</a>
</li>
<li>
<a href="#" data-original-title="picasa" class="picasa">
</a>
</li>
<li>
<a href="#" data-original-title="pintrest" class="pintrest">
</a>
</li>
<li>
<a href="#" data-original-title="rss" class="rss">
</a>
</li>
<li>
<a href="#" data-original-title="skype" class="skype">
</a>
</li>
<li>
<a href="#" data-original-title="spotify" class="spotify">
</a>
</li>
<li>
<a href="#" data-original-title="stumbleupon" class="stumbleupon">
</a>
</li>
<li>
<a href="#" data-original-title="tumblr" class="tumblr">
</a>
</li>
<li>
<a href="#" data-original-title="twitter" class="twitter">
</a>
</li>
<li>
<a href="#" data-original-title="vimeo" class="vimeo">
</a>
</li>
<li>
<a href="#" data-original-title="wordpress" class="wordpress">
</a>
</li>
<li>
<a href="#" data-original-title="xing" class="xing">
</a>
</li>
<li>
<a href="#" data-original-title="yahoo" class="yahoo">
</a>
</li>
<li>
<a href="#" data-original-title="youtube" class="youtube">
</a>
</li>
<li>
<a href="#" data-original-title="vk" class="vk">
</a>
</li>
<li>
<a href="#" data-original-title="instagram" class="instagram">
</a>
</li>
<li>
<a href="#" data-original-title="reddit" class="reddit">
</a>
</li>
<li>
<a href="#" data-original-title="aboutme" class="aboutme">
</a>
</li>
<li>
<a href="#" data-original-title="flickr" class="flickr">
</a>
</li>
<li>
<a href="#" data-original-title="foursquare" class="foursquare">
</a>
</li>
<li>
<a href="#" data-original-title="gravatar" class="gravatar">
</a>
</li>
<li>
<a href="#" data-original-title="klout" class="klout">
</a>
</li>
<li>
<a href="#" data-original-title="myspace" class="myspace">
</a>
</li>
<li>
<a href="#" data-original-title="quora" class="quora">
</a>
</li>
</ul>
</div>
</div>
<!-- END BLOCK BUTTONS PORTLET-->
<!-- BEGIN BLOCK BUTTONS PORTLET-->
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Inline Social Icons(Colored)
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body util-btn-margin-bottom-5">
<a href="#" data-original-title="amazon" class="social-icon social-icon-color amazon">
</a>
<a href="#" data-original-title="behance" class="social-icon social-icon-color behance">
</a>
<a href="#" data-original-title="blogger" class="social-icon social-icon-color blogger">
</a>
<a href="#" data-original-title="deviantart" class="social-icon social-icon-color deviantart">
</a>
<a href="#" data-original-title="dribbble" class="social-icon social-icon-color dribbble">
</a>
<a href="#" data-original-title="dropbox" class="social-icon social-icon-color dropbox">
</a>
<a href="#" data-original-title="facebook" class="social-icon social-icon-color facebook">
</a>
<a href="#" data-original-title="forrst" class="social-icon social-icon-color forrst">
</a>
<a href="#" data-original-title="github" class="social-icon social-icon-color github">
</a>
<a href="#" data-original-title="Goole Plus" class="social-icon social-icon-color googleplus">
</a>
<a href="#" data-original-title="jolicloud" class="social-icon social-icon-color jolicloud">
</a>
<a href="#" data-original-title="last-fm" class="social-icon social-icon-color last-fm">
</a>
<a href="#" data-original-title="linkedin" class="social-icon social-icon-color linkedin">
</a>
<a href="#" data-original-title="picasa" class="social-icon social-icon-color picasa">
</a>
<a href="#" data-original-title="pintrest" class="social-icon social-icon-color pintrest">
</a>
<a href="#" data-original-title="rss" class="social-icon social-icon-color rss">
</a>
<a href="#" data-original-title="skype" class="social-icon social-icon-color skype">
</a>
<a href="#" data-original-title="spotify" class="social-icon social-icon-color spotify">
</a>
<a href="#" data-original-title="stumbleupon" class="social-icon social-icon-color stumbleupon">
</a>
<a href="#" data-original-title="tumblr" class="social-icon social-icon-color tumblr">
</a>
<a href="#" data-original-title="twitter" class="social-icon social-icon-color twitter">
</a>
<a href="#" data-original-title="vimeo" class="social-icon social-icon-color vimeo">
</a>
<a href="#" data-original-title="wordpress" class="social-icon social-icon-color wordpress">
</a>
<a href="#" data-original-title="xing" class="social-icon social-icon-color xing">
</a>
<a href="#" data-original-title="yahoo" class="social-icon social-icon-color yahoo">
</a>
<a href="#" data-original-title="youtube" class="social-icon social-icon-color youtube">
</a>
<a href="#" data-original-title="vk" class="social-icon social-icon-color vk">
</a>
<a href="#" data-original-title="instagram" class="social-icon social-icon-color instagram">
</a>
<a href="#" data-original-title="reddit" class="social-icon social-icon-color reddit">
</a>
<a href="#" data-original-title="aboutme" class="social-icon social-icon-color aboutme">
</a>
<a href="#" data-original-title="flickr" class="social-icon social-icon-color flickr">
</a>
<a href="#" data-original-title="foursquare" class="social-icon social-icon-color foursquare">
</a>
<a href="#" data-original-title="gravatar" class="social-icon social-icon-color gravatar">
</a>
<a href="#" data-original-title="klout" class="social-icon social-icon-color klout">
</a>
<a href="#" data-original-title="myspace" class="social-icon social-icon-color myspace">
</a>
<a href="#" data-original-title="quora" class="social-icon social-icon-color quora">
</a>
</div>
</div>
<!-- END BLOCK BUTTONS PORTLET-->
</div>
<div class="col-md-6">
<!-- BEGIN BLOCK BUTTONS PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Button Groups
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div class="clearfix">
<h4 class="block">Basic Example
</h4>
<div class="btn-group">
<button type="button" class="btn btn-default">Left
</button>
<button type="button" class="btn btn-default">Middle
</button>
<button type="button" class="btn btn-default">Right
</button>
</div>
<div class="btn-group btn-group-solid">
<button type="button" class="btn red">Left
</button>
<button type="button" class="btn yellow">Middle
</button>
<button type="button" class="btn green">Right
</button>
</div>
</div>
<div class="clearfix">
<h4 class="block">Button Toolbar
</h4>
<div class="btn-toolbar margin-bottom-10">
<div class="btn-group">
<button type="button" class="btn btn-default">1
</button>
<button type="button" class="btn btn-default">2
</button>
<button type="button" class="btn btn-default">3
</button>
<button type="button" class="btn btn-default">4
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">5
</button>
<button type="button" class="btn btn-default">6
</button>
<button type="button" class="btn btn-default">7
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8
</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-group btn-group-solid">
<button type="button" class="btn red">1
</button>
<button type="button" class="btn green">2
</button>
<button type="button" class="btn blue">3
</button>
<button type="button" class="btn yellow">4
</button>
</div>
<div class="btn-group btn-group-solid">
<button type="button" class="btn purple">5
</button>
<button type="button" class="btn dark">6
</button>
<button type="button" class="btn default">7
</button>
</div>
<div class="btn-group btn-group-solid">
<button type="button" class="btn red">8
</button>
</div>
</div>
</div>
<div class="clearfix">
<h4 class="block">Button Group Sizing
</h4>
<div class="btn-toolbar">
<div class="btn-group btn-group-lg btn-group-solid margin-bottom-10">
<button type="button" class="btn red">Left
</button>
<button type="button" class="btn green">Middle
</button>
<button type="button" class="btn blue">Right
</button>
</div>
</div>
<div class="btn-toolbar margin-bottom-10">
<div class="btn-group btn-group-solid">
<button type="button" class="btn red">Left
</button>
<button type="button" class="btn green">Middle
</button>
<button type="button" class="btn blue">Right
</button>
</div>
</div>
<div class="btn-toolbar margin-bottom-10">
<div class="btn-group btn-group-sm btn-group-solid">
<button type="button" class="btn red">Left
</button>
<button type="button" class="btn green">Middle
</button>
<button type="button" class="btn blue">Right
</button>
</div>
</div>
<div class="btn-toolbar margin-bottom-10">
<div class="btn-group btn-group-xs btn-group-solid">
<button type="button" class="btn red">Left
</button>
<button type="button" class="btn green">Middle
</button>
<button type="button" class="btn blue">Right
</button>
</div>
</div>
</div>
<div class="clearfix">
<h4 class="block">Nesting Button Group
</h4>
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile
</button>
<button type="button" class="btn btn-default"><i class="fa fa-cogs"></i> Settings
</button>
<button type="button" class="btn btn-default"><i class="fa fa-bullhorn"></i> Feeds
</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-horizontal"></i> More
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
</div>
<div class="clearfix margin-bottom-10">
</div>
<div class="btn-group btn-group-solid">
<button type="button" class="btn red"><i class="fa fa-user"></i> Profile
</button>
<button type="button" class="btn green"><i class="fa fa-cogs"></i> Settings
</button>
<button type="button" class="btn purple"><i class="fa fa-bullhorn"></i> Feeds
</button>
<div class="btn-group btn-group-solid">
<button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-horizontal"></i> More
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix">
<h4 class="block">Vertical variation
</h4>
<div class="btn-group-vertical margin-right-10">
<button type="button" class="btn btn-default">Button
</button>
<button type="button" class="btn btn-default">Button
</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-default">Button
</button>
<button type="button" class="btn btn-default">Button
</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
</div>
<div class="btn-group-vertical btn-group-solid">
<button type="button" class="btn blue">Button
</button>
<button type="button" class="btn green">Button
</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop5" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop5">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<button type="button" class="btn red">Button
</button>
<button type="button" class="btn dark">Button
</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop6" type="button" class="btn default dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop6">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop7" type="button" class="btn purple dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop7">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop8" type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop8">
<li>
<a href="#">
Dropdown link
</a>
</li>
<li>
<a href="#">
Dropdown link
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix">
<h4 class="block">Justified Link Variation
</h4>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">
Left
</a>
<a href="#" class="btn btn-default">
Middle
</a>
<a href="#" class="btn btn-default">
Right
</a>
</div>
<div class="clearfix margin-bottom-10">
</div>
<div class="btn-group btn-group btn-group-justified">
<a href="#" class="btn red">
Left
</a>
<a href="#" class="btn blue">
Middle
</a>
<a href="#" class="btn green">
Right
</a>
</div>
</div>
</div>
</div>
<!-- END BLOCK BUTTONS PORTLET-->
<!-- BEGIN DROPDOWNS PORTLET-->
<div class="portlet box blue tabbable hide">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
<span class="hidden-480">
Dropdowns
</span>
</div>
</div>
<div class="portlet-body form">
<div class="tabbable portlet-tabs">
<ul class="nav nav-tabs">
<li>
<a href="#dropdown_2" data-toggle="tab">
Hoverable
</a>
</li>
<li class="active">
<a href="#dropdown_1" data-toggle="tab">
Default
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="dropdown_1">
<h4 class="block">Dropdown buttons
</h4>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Tools
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Settings
<span class="badge badge-success">
3
</span>
</a>
</li>
<li>
<a href="#">
Preferences
</a>
</li>
<li>
<a href="#">
Window Options
</a>
</li>
<li>
<a href="#">
Help
<span class="badge badge-important">
7
</span>
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn red dropdown-toggle" data-toggle="dropdown">Primary
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
<span class="badge badge-warning">
2
</span>
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
<span class="badge badge-info">
7
</span>
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn purple dropdown-toggle" data-toggle="dropdown">Success
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
<span class="badge badge-inverse">
7
</span>
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
<span class="badge">
4
</span>
</a>
</li>
</ul>
</div>
<div class="btn-toolbar hide">
<div class="btn-group">
<button class="btn green dropdown-toggle" data-toggle="dropdown">Success
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button class="btn blue dropdown-toggle" data-toggle="dropdown">Info
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse
</button>
<ul class="dropdown-menu opens-left">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<h4 class="block">Dropdown button with icons
</h4>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn green" href="#" data-toggle="dropdown">
<i class="fa fa-user"></i> User
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<i class="fa fa-pencil"></i> Edit
</a>
</li>
<li>
<a href="#">
<i class="fa fa-trash-o"></i> Delete
</a>
</li>
<li>
<a href="#">
<i class="fa fa-ban"></i> Ban
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="i"></i> Make admin
</a>
</li>
</ul>
</div>
<div class="btn-group">
<a class="btn purple" href="#" data-toggle="dropdown">
<i class="fa fa-user"></i> Settings
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<i class="fa fa-plus"></i> Add
</a>
</li>
<li>
<a href="#">
<i class="fa fa-trash-o"></i> Edit
</a>
</li>
<li>
<a href="#">
<i class="fa fa-times"></i> Delete
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="i"></i> Full Settings
</a>
</li>
</ul>
</div>
</div>
<div class="well">
</div>
<div class="well">
<h4 class="block">Dropup menu options.
</h4>
<div class="btn-group">
<button class="btn blue dropdown-toggle" data-toggle="dropdown">Info
</button>
<ul class="dropdown-menu bottom-up">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse
</button>
<ul class="dropdown-menu bottom-up">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<p>
<span class="label label-success">
NOTE:
</span>
By adding
<code>bottom-up
</code> class you make dropup menu.
</p>
</div>
</div>
<div class="tab-pane" id="dropdown_2">
<h4 class="block">Hoverable Dropdown Buttons
</h4>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" href="#">
Tools
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Settings
<span class="badge badge-success">
3
</span>
</a>
</li>
<li>
<a href="#">
Preferences
</a>
</li>
<li>
<a href="#">
Window Options
</a>
</li>
<li>
<a href="#">
Help
<span class="badge badge-important">
7
</span>
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn red dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Primary
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
<span class="badge badge-warning">
7
</span>
</a>
</li>
<li>
<a href="#">
Another action
<span class="badge badge-important">
2
</span>
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
<span class="badge badge-info">
4
</span>
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn purple dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
<span class="badge badge-inverse">
7
</span>
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
<span class="badge">
4
</span>
</a>
</li>
</ul>
</div>
<div class="btn-toolbar hide">
<div class="btn-group">
<button class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Success
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button class="btn black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse
</button>
<ul class="dropdown-menu opens-left">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<h4 class="block">Hoverable Dropdown Buttons with Icons
</h4>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn green" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
<i class="fa fa-user"></i> User
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<i class="fa fa-pencil"></i> Edit
</a>
</li>
<li>
<a href="#">
<i class="fa fa-trash-o"></i> Delete
</a>
</li>
<li>
<a href="#">
<i class="fa fa-ban"></i> Ban
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="i"></i> Make admin
</a>
</li>
</ul>
</div>
<div class="btn-group">
<a class="btn purple" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
<i class="fa fa-user"></i> Settings
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<i class="fa fa-plus"></i> Add
</a>
</li>
<li>
<a href="#">
<i class="fa fa-trash-o"></i> Edit
</a>
</li>
<li>
<a href="#">
<i class="fa fa-times"></i> Delete
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="i"></i> Full Settings
</a>
</li>
</ul>
</div>
</div>
<div class="well">
<h4 class="block">Hoverable Dropdown Buttons Dropdown with Checkboxes.
</h4>
<div class="btn-group">
<a class="btn green" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
Options #1
</a>
<div class="dropdown-menu hold-on-click dropdown-checkboxes">
<label><input type="checkbox">Option 1
</label>
<label><input type="checkbox">Option 2
</label>
<label><input type="checkbox">Option 3
</label>
<label><input type="checkbox">Option 4
</label>
<label><input type="checkbox">Option 5
</label>
</div>
</div>
<div class="btn-group">
<a class="btn red" href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
Options #2
</a>
<div class="dropdown-menu hold-on-click dropdown-checkboxes">
<label><input type="checkbox">Option 1
</label>
<label><input type="checkbox" checked>Option 2
</label>
<label><input type="checkbox">Option 3
</label>
<label><input type="checkbox" checked>Option 4
</label>
<label><input type="checkbox">Option 5
</label>
</div>
</div>
<p>
<span class="label label-success">
NOTE:
</span>
By adding
<code>hold-on-click
</code> class you can avoid closing the dropdown on click
</p>
</div>
<div class="well">
<h4 class="block">Hoverable Dropup Buttons.
</h4>
<div class="btn-group">
<button class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Info
</button>
<ul class="dropdown-menu bottom-up">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button class="btn black dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">Inverse
</button>
<ul class="dropdown-menu bottom-up">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<p>
<span class="label label-success">
NOTE:
</span>
By adding
<code>bottom-up
</code> class you make dropup menu.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END DROPDOWNS PORTLET-->
<!-- BEGIN DROPDOWNS PORTLET-->
<div class="portlet box green">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Button Dropdowns
</div>
</div>
<div class="portlet-body util-btn-group-margin-bottom-5">
<div class="clearfix">
<h4 class="block">Default Bootstrap Style
</h4>
<div class="btn-group">
<button type="button" class="btn btn-default">Default
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary
</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success">Success
</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info">Info
</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning
</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger
</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div class="clearfix">
<h4 class="block">Metronic Style
</h4>
<div class="btn-group">
<button type="button" class="btn default">Default
</button>
<button type="button" class="btn default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn blue">Blue
</button>
<button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn green">Green
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn red">Red
</button>
<button type="button" class="btn red dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn yellow">Yellow
</button>
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn dark">Dark
</button>
<button type="button" class="btn dark dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn purple">Purple
</button>
<button type="button" class="btn purple dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div class="clearfix">
<h4 class="block">Dropdowns with Multilevel Submenu
</h4>
<!-- Large button group -->
<div class="btn-group">
<button class="btn blue dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li class="dropdown-submenu">
<a href="javascript:;">
More options
</a>
<ul class="dropdown-menu" style="">
<li>
<a href="#">
Second level link
</a>
</li>
<li class="dropdown-submenu">
<a href="javascript:;">
More options
</a>
<ul class="dropdown-menu">
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
</ul>
</li>
<li>
<a href="index.html">
Second level link
</a>
</li>
<li>
<a href="index.html">
Second level link
</a>
</li>
<li>
<a href="index.html">
Second level link
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="btn-group dropup">
<button class="btn green dropdown-toggle" type="button" data-toggle="dropdown">
Dropup
<i class="fa fa-angle-up"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li class="dropdown-submenu">
<a href="javascript:;">
More options
</a>
<ul class="dropdown-menu" style="">
<li>
<a href="#">
Second level link
</a>
</li>
<li class="dropdown-submenu">
<a href="javascript:;">
More options
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
<li>
<a href="index.html">
Third level link
</a>
</li>
</ul>
</li>
<li>
<a href="index.html">
Second level link
</a>
</li>
<li>
<a href="index.html">
Second level link
</a>
</li>
<li>
<a href="index.html">
Second level link
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="clearfix">
<h4 class="block">Sizing
</h4>
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<div class="clearfix margin-bottom-10">
</div>
<!-- Large button group -->
<div class="btn-group">
<button class="btn red btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn blue btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn green btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
</div>
<div class="clearfix">
<h4 class="block">Dropup
</h4>
<div class="btn-toolbar margin-bottom-10">
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup
</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div class="btn-toolbar">
<div class="btn-group dropup">
<button type="button" class="btn blue">Dropup
</button>
<button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn green">Right dropup
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
</div>
<div class="clearfix">
<h4 class="block">Hoveralbe Dropdowns
</h4>
<div class="btn-toolbar margin-bottom-10">
<div class="btn-group">
<button type="button" class="btn btn-default">Dropdown
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Dropup
</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="fa fa-angle-up"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
Dropup
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn blue">Dropdown
</button>
<button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn green">Dropup
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
<i class="fa fa-angle-up"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
Dropdown
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
</div>
<div class="clearfix">
<h4 class="block">Dropdown with Checkboxes
& Search Form</h4>
<div class="btn-group">
<button class="btn green dropdown-toggle" type="button" data-toggle="dropdown">
Search Dropdown
</button>
<div class="dropdown-menu dropdown-content input-large hold-on-click" role="menu">
<form action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search...">
<span class="input-group-btn">
<button class="btn blue" type="submit">Go!</button>
</span>
</div>
</form>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn blue">Dropdown</button>
<button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
<label><input type="checkbox">Option 1</label>
<label><input type="checkbox" checked>Option 2</label>
<label><input type="checkbox">Option 3</label>
<label><input type="checkbox" checked>Option 4</label>
<label><input type="checkbox">Option 5</label>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn green">Dropup</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
<div class="dropdown-menu hold-on-click dropdown-checkboxes" role="menu">
<label><input type="checkbox">Option 1</label>
<label><input type="checkbox" checked>Option 2</label>
<label><input type="checkbox">Option 3</label>
<label><input type="checkbox" checked>Option 4</label>
<label><input type="checkbox">Option 5</label>
</div>
</div>
<!-- /btn-group -->
<div class="clearfix margin-top-10">
<span class="label label-success">
NOTE:
</span>
By adding
<code>hold-on-click
</code> class you can avoid closing the dropdown on click
</div>
</div>
<div class="clearfix">
<h4 class="block">Dropdown with Radio Buttons
</h4>
<div class="btn-group">
<button type="button" class="btn blue">Dropdown
</button>
<button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
<label><input type="radio" name="radio_button_1">Option 1
</label>
<label><input type="radio" name="radio_button_1">Option 2
</label>
<label><input type="radio" name="radio_button_1">Option 3
</label>
<label><input type="radio" name="radio_button_1">Option 4
</label>
<label><input type="radio" name="radio_button_1">Option 5
</label>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn green">Dropup
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-up"></i></button>
<div class="dropdown-menu hold-on-click dropdown-radiobuttons" role="menu">
<label><input type="radio" name="radio_button_2">Option 1
</label>
<label><input type="radio" name="radio_button_2">Option 2
</label>
<label><input type="radio" name="radio_button_2">Option 3
</label>
<label><input type="radio" name="radio_button_2">Option 4
</label>
<label><input type="radio" name="radio_button_2">Option 5
</label>
</div>
</div>
<!-- /btn-group -->
<div class="clearfix margin-top-10">
<span class="label label-success">
NOTE:
</span>
By adding
<code>hold-on-click
</code> class you can avoid closing the dropdown on click
</div>
</div>
</div>
<!-- END DROPDOWNS PORTLET-->
</div>
<div class="portlet box green util-btn-group-margin-bottom-5">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
<span class="hidden-480">
Button States
</span>
</div>
</div>
<div class="portlet-body util-btn-margin-bottom-5">
<h4>Loading State
</h4>
<div class="clearfix">
<button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-primary">
Loading state
</button>
<button type="button" data-loading-text="Loading..." class="demo-loading-btn btn btn-default">
Loading state
</button>
<button type="button" data-loading-text="Loading..." class="demo-loading-btn btn red">
Loading state
</button>
<button type="button" data-loading-text="Loading..." class="demo-loading-btn btn blue">
Loading state
</button>
</div>
<h4>Single Toggle
</h4>
<div class="clearfix">
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>
<button type="button" class="btn btn-default" data-toggle="button">
Single toggle
</button>
<button type="button" class="btn red" data-toggle="button">
Single toggle
</button>
<button type="button" class="btn blue" data-toggle="button">
Single toggle
</button>
</div>
<h4>Checkbox
</h4>
<div class="clearfix">
<div class="btn-group" data-toggle="buttons">
<label class="btn default active">
<input type="checkbox" class="toggle"> Option 1
</label>
<label class="btn default">
<input type="checkbox" class="toggle"> Option 2
</label>
<label class="btn default">
<input type="checkbox" class="toggle"> Option 3
</label>
</div>
</div>
<div class="clearfix">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" class="toggle"> Option 1
</label>
<label class="btn btn-default active">
<input type="checkbox" class="toggle"> Option 2
</label>
<label class="btn btn-default">
<input type="checkbox" class="toggle"> Option 3
</label>
</div>
</div>
<h4>Radio
</h4>
<div class="clearfix">
<div class="btn-group" data-toggle="buttons">
<label class="btn blue active">
<input type="radio" class="toggle"> Option 1
</label>
<label class="btn blue">
<input type="radio" class="toggle"> Option 2
</label>
<label class="btn blue">
<input type="radio" class="toggle"> Option 3
</label>
</div>
</div>
<div class="clearfix">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" class="toggle"> Option 1
</label>
<label class="btn btn-default">
<input type="radio" class="toggle"> Option 2
</label>
<label class="btn btn-default">
<input type="radio" class="toggle"> Option 3
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_1_1" data-toggle="tab">
Font Awesome Icons
</a>
</li>
<li>
<a href="#tab_1_2" data-toggle="tab">
Glyphicons
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fontawesome-demo" id="tab_1_1">
<div class="note note-success">
<p>
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. The complete set of 439 icons in Font Awesome 4.1.0
</p>
</div>
<h3>71 New Icons in 4.1
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-automobile"></i> fa-automobile
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-bank"></i> fa-bank
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-behance"></i> fa-behance
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-behance-square"></i> fa-behance-square
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-bomb"></i> fa-bomb
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-building"></i> fa-building
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-cab"></i> fa-cab
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-car"></i> fa-car
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-child"></i> fa-child
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-circle-o-notch"></i> fa-circle-o-notch
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-circle-thin"></i> fa-circle-thin
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-codepen"></i> fa-codepen
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-cube"></i> fa-cube
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-cubes"></i> fa-cubes
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-database"></i> fa-database
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-delicious"></i> fa-delicious
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-deviantart"></i> fa-deviantart
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-digg"></i> fa-digg
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-drupal"></i> fa-drupal
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-empire"></i> fa-empire
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-envelope-square"></i> fa-envelope-square
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-fax"></i> fa-fax
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-archive-o"></i> fa-file-archive-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-audio-o"></i> fa-file-audio-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-code-o"></i> fa-file-code-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-excel-o"></i> fa-file-excel-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-image-o"></i> fa-file-image-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-movie-o"></i> fa-file-movie-o
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-pdf-o"></i> fa-file-pdf-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-photo-o"></i> fa-file-photo-o
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-picture-o"></i> fa-file-picture-o
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-powerpoint-o"></i> fa-file-powerpoint-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-sound-o"></i> fa-file-sound-o
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-video-o"></i> fa-file-video-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-word-o"></i> fa-file-word-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-file-zip-o"></i> fa-file-zip-o
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-ge"></i> fa-ge
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-git"></i> fa-git
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-git-square"></i> fa-git-square
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-google"></i> fa-google
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-graduation-cap"></i> fa-graduation-cap
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-hacker-news"></i> fa-hacker-news
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-header"></i> fa-header
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-history"></i> fa-history
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-institution"></i> fa-institution
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-joomla"></i> fa-joomla
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-jsfiddle"></i> fa-jsfiddle
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-language"></i> fa-language
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-life-bouy"></i> fa-life-bouy
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-life-ring"></i> fa-life-ring
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-life-saver"></i> fa-life-saver
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-mortar-board"></i> fa-mortar-board
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-openid"></i> fa-openid
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paper-plane"></i> fa-paper-plane
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paper-plane-o"></i> fa-paper-plane-o
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paragraph"></i> fa-paragraph
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-paw"></i> fa-paw
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-pied-piper"></i> fa-pied-piper
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-pied-piper-alt"></i> fa-pied-piper-alt
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-pied-piper-square"></i> fa-pied-piper-square
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-qq"></i> fa-qq
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-ra"></i> fa-ra
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-rebel"></i> fa-rebel
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-recycle"></i> fa-recycle
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-reddit"></i> fa-reddit
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-reddit-square"></i> fa-reddit-square
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-send"></i> fa-send
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-send-o"></i> fa-send-o
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-share-alt"></i> fa-share-alt
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-share-alt-square"></i> fa-share-alt-square
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-slack"></i> fa-slack
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-sliders"></i> fa-sliders
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-soundcloud"></i> fa-soundcloud
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-space-shuttle"></i> fa-space-shuttle
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-spoon"></i> fa-spoon
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-spotify"></i> fa-spotify
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-steam"></i> fa-steam
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-steam-square"></i> fa-steam-square
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-stumbleupon"></i> fa-stumbleupon
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-stumbleupon-circle"></i> fa-stumbleupon-circle
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-support"></i> fa-support
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-taxi"></i> fa-taxi
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-tencent-weibo"></i> fa-tencent-weibo
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-tree"></i> fa-tree
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-university"></i> fa-university
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-vine"></i> fa-vine
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-wechat"></i> fa-wechat
<span class="text-muted">(alias)
</span></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-weixin"></i> fa-weixin
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-wordpress"></i> fa-wordpress
</a></div>
<div class="fa-item col-md-3 col-sm-4"><i class="fa fa-yahoo"></i> fa-yahoo
</a></div>
<!--<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rub"></i> fa-rub
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ruble"></i> fa-ruble
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rouble"></i> fa-rouble
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pagelines"></i> fa-pagelines
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-stack-exchange"></i> fa-stack-exchange
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-left"></i> fa-toggle-left
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dot-circle-o"></i> fa-dot-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-wheelchair"></i> fa-wheelchair
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-vimeo-square"></i> fa-vimeo-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-try"></i> fa-try
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-turkish-lira"></i> fa-turkish-lira
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-square-o"></i> fa-plus-square-o
</div>-->
</div>
<h3>Web Application Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-adjust"></i> fa-adjust
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-anchor"></i> fa-anchor
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-archive"></i> fa-archive
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows"></i> fa-arrows
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows-h"></i> fa-arrows-h
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows-v"></i> fa-arrows-v
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-asterisk"></i> fa-asterisk
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ban"></i> fa-ban
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bar-chart-o"></i> fa-bar-chart-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-barcode"></i> fa-barcode
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bars"></i> fa-bars
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-beer"></i> fa-beer
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bell"></i> fa-bell
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bell-o"></i> fa-bell-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bolt"></i> fa-bolt
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-book"></i> fa-book
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bookmark"></i> fa-bookmark
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bookmark-o"></i> fa-bookmark-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-briefcase"></i> fa-briefcase
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bug"></i> fa-bug
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-building-o"></i> fa-building-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bullhorn"></i> fa-bullhorn
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bullseye"></i> fa-bullseye
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-calendar"></i> fa-calendar
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-calendar-o"></i> fa-calendar-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-camera"></i> fa-camera
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-camera-retro"></i> fa-camera-retro
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-certificate"></i> fa-certificate
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check"></i> fa-check
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check-circle"></i> fa-check-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check-circle-o"></i> fa-check-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check-square"></i> fa-check-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check-square-o"></i> fa-check-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-circle"></i> fa-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-circle-o"></i> fa-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-clock-o"></i> fa-clock-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cloud"></i> fa-cloud
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cloud-download"></i> fa-cloud-download
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cloud-upload"></i> fa-cloud-upload
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-code"></i> fa-code
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-code-fork"></i> fa-code-fork
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-coffee"></i> fa-coffee
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cog"></i> fa-cog
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cogs"></i> fa-cogs
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-comment"></i> fa-comment
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-comment-o"></i> fa-comment-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-comments"></i> fa-comments
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-comments-o"></i> fa-comments-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-compass"></i> fa-compass
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-credit-card"></i> fa-credit-card
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-crop"></i> fa-crop
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-crosshairs"></i> fa-crosshairs
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cutlery"></i> fa-cutlery
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dashboard"></i> fa-dashboard
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-desktop"></i> fa-desktop
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dot-circle-o"></i> fa-dot-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-download"></i> fa-download
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-edit"></i> fa-edit
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ellipsis-h"></i> fa-ellipsis-h
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ellipsis-v"></i> fa-ellipsis-v
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-envelope"></i> fa-envelope
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-envelope-o"></i> fa-envelope-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-eraser"></i> fa-eraser
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-exchange"></i> fa-exchange
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-exclamation"></i> fa-exclamation
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-exclamation-circle"></i> fa-exclamation-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-external-link"></i> fa-external-link
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-external-link-square"></i> fa-external-link-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-eye"></i> fa-eye
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-eye-slash"></i> fa-eye-slash
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-female"></i> fa-female
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-fighter-jet"></i> fa-fighter-jet
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-film"></i> fa-film
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-filter"></i> fa-filter
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-fire"></i> fa-fire
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-fire-extinguisher"></i> fa-fire-extinguisher
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-flag"></i> fa-flag
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-flag-checkered"></i> fa-flag-checkered
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-flag-o"></i> fa-flag-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-flash"></i> fa-flash
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-flask"></i> fa-flask
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-folder"></i> fa-folder
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-folder-o"></i> fa-folder-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-folder-open"></i> fa-folder-open
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-folder-open-o"></i> fa-folder-open-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-frown-o"></i> fa-frown-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gamepad"></i> fa-gamepad
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gavel"></i> fa-gavel
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gear"></i> fa-gear
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gears"></i> fa-gears
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gift"></i> fa-gift
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-glass"></i> fa-glass
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-globe"></i> fa-globe
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-group"></i> fa-group
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-hdd-o"></i> fa-hdd-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-headphones"></i> fa-headphones
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-heart"></i> fa-heart
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-heart-o"></i> fa-heart-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-home"></i> fa-home
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-inbox"></i> fa-inbox
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-info"></i> fa-info
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-info-circle"></i> fa-info-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-key"></i> fa-key
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-keyboard-o"></i> fa-keyboard-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-laptop"></i> fa-laptop
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-leaf"></i> fa-leaf
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-legal"></i> fa-legal
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-lemon-o"></i> fa-lemon-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-level-down"></i> fa-level-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-level-up"></i> fa-level-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-lightbulb-o"></i> fa-lightbulb-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-location-arrow"></i> fa-location-arrow
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-lock"></i> fa-lock
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-magic"></i> fa-magic
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-magnet"></i> fa-magnet
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-mail-forward"></i> fa-mail-forward
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-mail-reply"></i> fa-mail-reply
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-mail-reply-all"></i> fa-mail-reply-all
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-male"></i> fa-male
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-map-marker"></i> fa-map-marker
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-meh-o"></i> fa-meh-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-microphone"></i> fa-microphone
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-microphone-slash"></i> fa-microphone-slash
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-minus"></i> fa-minus
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-minus-circle"></i> fa-minus-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-minus-square"></i> fa-minus-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-minus-square-o"></i> fa-minus-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-mobile"></i> fa-mobile
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-mobile-phone"></i> fa-mobile-phone
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-money"></i> fa-money
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-moon-o"></i> fa-moon-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-music"></i> fa-music
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pencil"></i> fa-pencil
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pencil-square"></i> fa-pencil-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pencil-square-o"></i> fa-pencil-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-phone"></i> fa-phone
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-phone-square"></i> fa-phone-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-picture-o"></i> fa-picture-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plane"></i> fa-plane
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus"></i> fa-plus
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-circle"></i> fa-plus-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-square"></i> fa-plus-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-square-o"></i> fa-plus-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-power-off"></i> fa-power-off
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-print"></i> fa-print
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-puzzle-piece"></i> fa-puzzle-piece
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-qrcode"></i> fa-qrcode
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-question"></i> fa-question
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-question-circle"></i> fa-question-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-quote-left"></i> fa-quote-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-quote-right"></i> fa-quote-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-random"></i> fa-random
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-refresh"></i> fa-refresh
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-reply"></i> fa-reply
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-reply-all"></i> fa-reply-all
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-retweet"></i> fa-retweet
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-road"></i> fa-road
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rocket"></i> fa-rocket
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rss"></i> fa-rss
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rss-square"></i> fa-rss-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-search"></i> fa-search
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-search-minus"></i> fa-search-minus
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-search-plus"></i> fa-search-plus
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-share"></i> fa-share
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-share-square"></i> fa-share-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-share-square-o"></i> fa-share-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-shield"></i> fa-shield
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-shopping-cart"></i> fa-shopping-cart
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sign-in"></i> fa-sign-in
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sign-out"></i> fa-sign-out
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-signal"></i> fa-signal
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sitemap"></i> fa-sitemap
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-smile-o"></i> fa-smile-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort"></i> fa-sort
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-alpha-asc"></i> fa-sort-alpha-asc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-alpha-desc"></i> fa-sort-alpha-desc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-amount-asc"></i> fa-sort-amount-asc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-amount-desc"></i> fa-sort-amount-desc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-asc"></i> fa-sort-asc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-desc"></i> fa-sort-desc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-down"></i> fa-sort-down
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-numeric-asc"></i> fa-sort-numeric-asc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-numeric-desc"></i> fa-sort-numeric-desc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sort-up"></i> fa-sort-up
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-spinner"></i> fa-spinner
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-square"></i> fa-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-square-o"></i> fa-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-star"></i> fa-star
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-star-half"></i> fa-star-half
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-star-half-empty"></i> fa-star-half-empty
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-star-half-full"></i> fa-star-half-full
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-star-half-o"></i> fa-star-half-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-star-o"></i> fa-star-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-subscript"></i> fa-subscript
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-suitcase"></i> fa-suitcase
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-sun-o"></i> fa-sun-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-superscript"></i> fa-superscript
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tablet"></i> fa-tablet
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tachometer"></i> fa-tachometer
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tag"></i> fa-tag
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tags"></i> fa-tags
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tasks"></i> fa-tasks
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-terminal"></i> fa-terminal
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-thumb-tack"></i> fa-thumb-tack
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-thumbs-down"></i> fa-thumbs-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-thumbs-up"></i> fa-thumbs-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ticket"></i> fa-ticket
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-times"></i> fa-times
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-times-circle"></i> fa-times-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-times-circle-o"></i> fa-times-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tint"></i> fa-tint
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-down"></i> fa-toggle-down
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-left"></i> fa-toggle-left
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-right"></i> fa-toggle-right
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-up"></i> fa-toggle-up
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-trash-o"></i> fa-trash-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-trophy"></i> fa-trophy
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-truck"></i> fa-truck
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-umbrella"></i> fa-umbrella
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-unlock"></i> fa-unlock
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-unlock-alt"></i> fa-unlock-alt
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-unsorted"></i> fa-unsorted
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-upload"></i> fa-upload
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-user"></i> fa-user
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-users"></i> fa-users
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-video-camera"></i> fa-video-camera
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-volume-down"></i> fa-volume-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-volume-off"></i> fa-volume-off
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-volume-up"></i> fa-volume-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-warning"></i> fa-warning
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-wheelchair"></i> fa-wheelchair
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-wrench"></i> fa-wrench
</div>
</div>
<h3>Form Control Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check-square"></i> fa-check-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-check-square-o"></i> fa-check-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-circle"></i> fa-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-circle-o"></i> fa-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dot-circle-o"></i> fa-dot-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-minus-square"></i> fa-minus-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-minus-square-o"></i> fa-minus-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-square"></i> fa-plus-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-square-o"></i> fa-plus-square-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-square"></i> fa-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-square-o"></i> fa-square-o
</div>
</div>
<h3>Currency Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bitcoin"></i> fa-bitcoin
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-btc"></i> fa-btc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cny"></i> fa-cny
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dollar"></i> fa-dollar
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-eur"></i> fa-eur
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-euro"></i> fa-euro
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gbp"></i> fa-gbp
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-inr"></i> fa-inr
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-jpy"></i> fa-jpy
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-krw"></i> fa-krw
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-money"></i> fa-money
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rmb"></i> fa-rmb
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rouble"></i> fa-rouble
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rub"></i> fa-rub
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ruble"></i> fa-ruble
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rupee"></i> fa-rupee
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-try"></i> fa-try
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-turkish-lira"></i> fa-turkish-lira
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-usd"></i> fa-usd
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-won"></i> fa-won
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-yen"></i> fa-yen
<span class="text-muted">
(alias)
</span>
</div>
</div>
<h3>Text Editor Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-align-center"></i> fa-align-center
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-align-justify"></i> fa-align-justify
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-align-left"></i> fa-align-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-align-right"></i> fa-align-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bold"></i> fa-bold
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chain"></i> fa-chain
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chain-broken"></i> fa-chain-broken
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-clipboard"></i> fa-clipboard
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-columns"></i> fa-columns
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-copy"></i> fa-copy
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-cut"></i> fa-cut
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dedent"></i> fa-dedent
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-eraser"></i> fa-eraser
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-file"></i> fa-file
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-file-o"></i> fa-file-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-file-text"></i> fa-file-text
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-file-text-o"></i> fa-file-text-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-files-o"></i> fa-files-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-floppy-o"></i> fa-floppy-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-font"></i> fa-font
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-indent"></i> fa-indent
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-italic"></i> fa-italic
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-link"></i> fa-link
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-list"></i> fa-list
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-list-alt"></i> fa-list-alt
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-list-ol"></i> fa-list-ol
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-list-ul"></i> fa-list-ul
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-outdent"></i> fa-outdent
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-paperclip"></i> fa-paperclip
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-paste"></i> fa-paste
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-repeat"></i> fa-repeat
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rotate-left"></i> fa-rotate-left
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-rotate-right"></i> fa-rotate-right
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-save"></i> fa-save
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-scissors"></i> fa-scissors
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-strikethrough"></i> fa-strikethrough
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-table"></i> fa-table
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-text-height"></i> fa-text-height
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-text-width"></i> fa-text-width
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-th"></i> fa-th
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-th-large"></i> fa-th-large
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-th-list"></i> fa-th-list
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-underline"></i> fa-underline
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-undo"></i> fa-undo
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-unlink"></i> fa-unlink
<span class="text-muted">
(alias)
</span>
</div>
</div>
<h3>Directional Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-double-down"></i> fa-angle-double-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-double-left"></i> fa-angle-double-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-double-right"></i> fa-angle-double-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-double-up"></i> fa-angle-double-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-down"></i>
fa-angle-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-left"></i> fa-angle-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-right"></i> fa-angle-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-angle-up"></i> fa-angle-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-down"></i> fa-arrow-circle-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-left"></i> fa-arrow-circle-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-o-down"></i> fa-arrow-circle-o-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-o-up"></i> fa-arrow-circle-o-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-right"></i> fa-arrow-circle-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-circle-up"></i> fa-arrow-circle-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-down"></i> fa-arrow-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-left"></i> fa-arrow-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-right"></i> fa-arrow-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrow-up"></i> fa-arrow-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows"></i> fa-arrows
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows-alt"></i> fa-arrows-alt
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows-h"></i> fa-arrows-h
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows-v"></i> fa-arrows-v
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-down"></i> fa-caret-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-left"></i> fa-caret-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-right"></i> fa-caret-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-caret-up"></i> fa-caret-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-circle-down"></i> fa-chevron-circle-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-circle-left"></i> fa-chevron-circle-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-circle-right"></i> fa-chevron-circle-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-circle-up"></i> fa-chevron-circle-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-down"></i> fa-chevron-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-left"></i> fa-chevron-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-right"></i> fa-chevron-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-chevron-up"></i> fa-chevron-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-hand-o-down"></i> fa-hand-o-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-hand-o-left"></i> fa-hand-o-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-hand-o-right"></i> fa-hand-o-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-hand-o-up"></i> fa-hand-o-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-long-arrow-down"></i> fa-long-arrow-down
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-long-arrow-left"></i> fa-long-arrow-left
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-long-arrow-right"></i> fa-long-arrow-right
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-long-arrow-up"></i> fa-long-arrow-up
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-down"></i> fa-toggle-down
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-left"></i> fa-toggle-left
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-right"></i> fa-toggle-right
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-toggle-up"></i> fa-toggle-up
<span class="text-muted">
(alias)
</span>
</div>
</div>
<h3>Video Player Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-arrows-alt"></i> fa-arrows-alt
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-backward"></i> fa-backward
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-compress"></i> fa-compress
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-eject"></i> fa-eject
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-expand"></i> fa-expand
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-fast-backward"></i> fa-fast-backward
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-fast-forward"></i> fa-fast-forward
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-forward"></i> fa-forward
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pause"></i> fa-pause
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-play"></i> fa-play
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-play-circle"></i> fa-play-circle
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-play-circle-o"></i> fa-play-circle-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-step-backward"></i> fa-step-backward
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-step-forward"></i> fa-step-forward
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-stop"></i> fa-stop
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-youtube-play"></i> fa-youtube-play
</div>
</div>
<h3>Brand Icons
</h3>
<div class="alert alert-success">
<ul class="margin-bottom-none padding-left-lg">
<li>
All brand icons are trademarks of their respective owners.
</li>
<li>
The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
</li>
</ul>
</div>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-adn"></i> fa-adn
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-android"></i> fa-android
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-apple"></i> fa-apple
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bitbucket"></i> fa-bitbucket
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bitbucket-square"></i> fa-bitbucket-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-bitcoin"></i> fa-bitcoin
<span class="text-muted">
(alias)
</span>
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-btc"></i> fa-btc
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-css3"></i> fa-css3
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dribbble"></i> fa-dribbble
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-dropbox"></i> fa-dropbox
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-facebook"></i> fa-facebook
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-facebook-square"></i> fa-facebook-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-flickr"></i> fa-flickr
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-foursquare"></i> fa-foursquare
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-github"></i> fa-github
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-github-alt"></i> fa-github-alt
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-github-square"></i> fa-github-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-gittip"></i> fa-gittip
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-google-plus"></i> fa-google-plus
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-google-plus-square"></i> fa-google-plus-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-html5"></i> fa-html5
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-instagram"></i> fa-instagram
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-linkedin"></i> fa-linkedin
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-linkedin-square"></i> fa-linkedin-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-linux"></i> fa-linux
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-maxcdn"></i> fa-maxcdn
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pagelines"></i> fa-pagelines
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pinterest"></i> fa-pinterest
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-pinterest-square"></i> fa-pinterest-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-renren"></i> fa-renren
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-skype"></i> fa-skype
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-stack-exchange"></i> fa-stack-exchange
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-stack-overflow"></i> fa-stack-overflow
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-trello"></i> fa-trello
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tumblr"></i> fa-tumblr
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-tumblr-square"></i> fa-tumblr-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-twitter"></i> fa-twitter
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-twitter-square"></i> fa-twitter-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-vimeo-square"></i> fa-vimeo-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-vk"></i> fa-vk
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-weibo"></i> fa-weibo
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-windows"></i> fa-windows
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-xing"></i> fa-xing
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-xing-square"></i> fa-xing-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-youtube"></i> fa-youtube
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-youtube-play"></i> fa-youtube-play
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-youtube-square"></i> fa-youtube-square
</div>
</div>
<h3>Medical Icons
</h3>
<div class="row margin-bottom-20">
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-ambulance"></i> fa-ambulance
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-h-square"></i> fa-h-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-hospital-o"></i> fa-hospital-o
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-medkit"></i> fa-medkit
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-plus-square"></i> fa-plus-square
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-stethoscope"></i> fa-stethoscope
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-user-md"></i> fa-user-md
</div>
<div class="fa-item col-md-3 col-sm-4">
<i class="fa fa-wheelchair"></i> fa-wheelchair
</div>
</div>
</div>
<div class="tab-pane glyphicons-demo" id="tab_1_2">
<div class="note note-success">
<p>
Includes 200 glyphs in font format from the Glyphicon Halflings set.
<a href="http://glyphicons.com/" target="_blank">
Glyphicons
</a>
Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.
</p>
</div>
<ul class="bs-glyphicons-list">
<li>
<span class="glyphicon glyphicon-asterisk">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-asterisk
</span>
</li>
<li>
<span class="glyphicon glyphicon-plus">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-plus
</span>
</li>
<li>
<span class="glyphicon glyphicon-euro">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-euro
</span>
</li>
<li>
<span class="glyphicon glyphicon-minus">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-minus
</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-cloud
</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-envelope
</span>
</li>
<li>
<span class="glyphicon glyphicon-pencil">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-pencil
</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-glass
</span>
</li>
<li>
<span class="glyphicon glyphicon-music">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-music
</span>
</li>
<li>
<span class="glyphicon glyphicon-search">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-search
</span>
</li>
<li>
<span class="glyphicon glyphicon-heart">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-heart
</span>
</li>
<li>
<span class="glyphicon glyphicon-star">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-star
</span>
</li>
<li>
<span class="glyphicon glyphicon-star-empty">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-star-empty
</span>
</li>
<li>
<span class="glyphicon glyphicon-user">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-user
</span>
</li>
<li>
<span class="glyphicon glyphicon-film">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-film
</span>
</li>
<li>
<span class="glyphicon glyphicon-th-large">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-th-large
</span>
</li>
<li>
<span class="glyphicon glyphicon-th">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-th
</span>
</li>
<li>
<span class="glyphicon glyphicon-th-list">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-th-list
</span>
</li>
<li>
<span class="glyphicon glyphicon-ok">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-ok
</span>
</li>
<li>
<span class="glyphicon glyphicon-remove">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-remove
</span>
</li>
<li>
<span class="glyphicon glyphicon-zoom-in">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-zoom-in
</span>
</li>
<li>
<span class="glyphicon glyphicon-zoom-out">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-zoom-out
</span>
</li>
<li>
<span class="glyphicon glyphicon-off">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-off
</span>
</li>
<li>
<span class="glyphicon glyphicon-signal">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-signal
</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-cog
</span>
</li>
<li>
<span class="glyphicon glyphicon-trash">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-trash
</span>
</li>
<li>
<span class="glyphicon glyphicon-home">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-home
</span>
</li>
<li>
<span class="glyphicon glyphicon-file">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-file
</span>
</li>
<li>
<span class="glyphicon glyphicon-time">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-time
</span>
</li>
<li>
<span class="glyphicon glyphicon-road">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-road
</span>
</li>
<li>
<span class="glyphicon glyphicon-download-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-download-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-download">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-download
</span>
</li>
<li>
<span class="glyphicon glyphicon-upload">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-upload
</span>
</li>
<li>
<span class="glyphicon glyphicon-inbox">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-inbox
</span>
</li>
<li>
<span class="glyphicon glyphicon-play-circle">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-play-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-repeat">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-repeat
</span>
</li>
<li>
<span class="glyphicon glyphicon-refresh">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-refresh
</span>
</li>
<li>
<span class="glyphicon glyphicon-list-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-list-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-lock">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-lock
</span>
</li>
<li>
<span class="glyphicon glyphicon-flag">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-flag
</span>
</li>
<li>
<span class="glyphicon glyphicon-headphones">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-headphones
</span>
</li>
<li>
<span class="glyphicon glyphicon-volume-off">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-volume-off
</span>
</li>
<li>
<span class="glyphicon glyphicon-volume-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-volume-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-volume-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-volume-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-qrcode">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-qrcode
</span>
</li>
<li>
<span class="glyphicon glyphicon-barcode">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-barcode
</span>
</li>
<li>
<span class="glyphicon glyphicon-tag">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tag
</span>
</li>
<li>
<span class="glyphicon glyphicon-tags">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tags
</span>
</li>
<li>
<span class="glyphicon glyphicon-book">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-book
</span>
</li>
<li>
<span class="glyphicon glyphicon-bookmark">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-bookmark
</span>
</li>
<li>
<span class="glyphicon glyphicon-print">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-print
</span>
</li>
<li>
<span class="glyphicon glyphicon-camera">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-camera
</span>
</li>
<li>
<span class="glyphicon glyphicon-font">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-font
</span>
</li>
<li>
<span class="glyphicon glyphicon-bold">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-bold
</span>
</li>
<li>
<span class="glyphicon glyphicon-italic">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-italic
</span>
</li>
<li>
<span class="glyphicon glyphicon-text-height">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-text-height
</span>
</li>
<li>
<span class="glyphicon glyphicon-text-width">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-text-width
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-left">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-align-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-center">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-align-center
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-right">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-align-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-justify">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-align-justify
</span>
</li>
<li>
<span class="glyphicon glyphicon-list">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-list
</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-left">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-indent-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-right">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-indent-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-facetime-video">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-facetime-video
</span>
</li>
<li>
<span class="glyphicon glyphicon-picture">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-picture
</span>
</li>
<li>
<span class="glyphicon glyphicon-map-marker">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-map-marker
</span>
</li>
<li>
<span class="glyphicon glyphicon-adjust">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-adjust
</span>
</li>
<li>
<span class="glyphicon glyphicon-tint">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tint
</span>
</li>
<li>
<span class="glyphicon glyphicon-edit">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-edit
</span>
</li>
<li>
<span class="glyphicon glyphicon-share">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-share
</span>
</li>
<li>
<span class="glyphicon glyphicon-check">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-check
</span>
</li>
<li>
<span class="glyphicon glyphicon-move">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-move
</span>
</li>
<li>
<span class="glyphicon glyphicon-step-backward">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-step-backward
</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-backward">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-fast-backward
</span>
</li>
<li>
<span class="glyphicon glyphicon-backward">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-backward
</span>
</li>
<li>
<span class="glyphicon glyphicon-play">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-play
</span>
</li>
<li>
<span class="glyphicon glyphicon-pause">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-pause
</span>
</li>
<li>
<span class="glyphicon glyphicon-stop">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-stop
</span>
</li>
<li>
<span class="glyphicon glyphicon-forward">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-forward
</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-forward">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-fast-forward
</span>
</li>
<li>
<span class="glyphicon glyphicon-step-forward">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-step-forward
</span>
</li>
<li>
<span class="glyphicon glyphicon-eject">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-eject
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-left">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-chevron-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-right">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-chevron-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-plus-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-plus-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-minus-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-minus-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-remove-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-ok-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-question-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-question-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-info-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-info-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-screenshot">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-screenshot
</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-circle">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-remove-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-circle">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-ok-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-ban-circle">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-ban-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-left">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-arrow-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-right">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-arrow-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-arrow-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-arrow-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-share-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-share-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-full">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-resize-full
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-small">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-resize-small
</span>
</li>
<li>
<span class="glyphicon glyphicon-exclamation-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-exclamation-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-gift">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-gift
</span>
</li>
<li>
<span class="glyphicon glyphicon-leaf">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-leaf
</span>
</li>
<li>
<span class="glyphicon glyphicon-fire">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-fire
</span>
</li>
<li>
<span class="glyphicon glyphicon-eye-open">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-eye-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-eye-close">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-eye-close
</span>
</li>
<li>
<span class="glyphicon glyphicon-warning-sign">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-warning-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-plane">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-plane
</span>
</li>
<li>
<span class="glyphicon glyphicon-calendar">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-calendar
</span>
</li>
<li>
<span class="glyphicon glyphicon-random">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-random
</span>
</li>
<li>
<span class="glyphicon glyphicon-comment">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-comment
</span>
</li>
<li>
<span class="glyphicon glyphicon-magnet">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-magnet
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-chevron-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-chevron-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-retweet">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-retweet
</span>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-shopping-cart
</span>
</li>
<li>
<span class="glyphicon glyphicon-folder-close">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-folder-close
</span>
</li>
<li>
<span class="glyphicon glyphicon-folder-open">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-folder-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-vertical">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-resize-vertical
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-horizontal">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-resize-horizontal
</span>
</li>
<li>
<span class="glyphicon glyphicon-hdd">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-hdd
</span>
</li>
<li>
<span class="glyphicon glyphicon-bullhorn">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-bullhorn
</span>
</li>
<li>
<span class="glyphicon glyphicon-bell">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-bell
</span>
</li>
<li>
<span class="glyphicon glyphicon-certificate">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-certificate
</span>
</li>
<li>
<span class="glyphicon glyphicon-thumbs-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-thumbs-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-thumbs-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-thumbs-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-right">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-hand-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-left">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-hand-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-hand-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-hand-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-right">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-circle-arrow-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-left">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-circle-arrow-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-circle-arrow-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-circle-arrow-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-globe">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-globe
</span>
</li>
<li>
<span class="glyphicon glyphicon-wrench">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-wrench
</span>
</li>
<li>
<span class="glyphicon glyphicon-tasks">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tasks
</span>
</li>
<li>
<span class="glyphicon glyphicon-filter">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-filter
</span>
</li>
<li>
<span class="glyphicon glyphicon-briefcase">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-briefcase
</span>
</li>
<li>
<span class="glyphicon glyphicon-fullscreen">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-fullscreen
</span>
</li>
<li>
<span class="glyphicon glyphicon-dashboard">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-dashboard
</span>
</li>
<li>
<span class="glyphicon glyphicon-paperclip">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-paperclip
</span>
</li>
<li>
<span class="glyphicon glyphicon-heart-empty">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-heart-empty
</span>
</li>
<li>
<span class="glyphicon glyphicon-link">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-link
</span>
</li>
<li>
<span class="glyphicon glyphicon-phone">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-phone
</span>
</li>
<li>
<span class="glyphicon glyphicon-pushpin">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-pushpin
</span>
</li>
<li>
<span class="glyphicon glyphicon-usd">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-usd
</span>
</li>
<li>
<span class="glyphicon glyphicon-gbp">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-gbp
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-alphabet">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort-by-alphabet
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-alphabet-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort-by-alphabet-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-order">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort-by-order
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-order-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort-by-order-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-attributes">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort-by-attributes
</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-attributes-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sort-by-attributes-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-unchecked">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-unchecked
</span>
</li>
<li>
<span class="glyphicon glyphicon-expand">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-expand
</span>
</li>
<li>
<span class="glyphicon glyphicon-collapse-down">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-collapse-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-collapse-up">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-collapse-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-log-in">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-log-in
</span>
</li>
<li>
<span class="glyphicon glyphicon-flash">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-flash
</span>
</li>
<li>
<span class="glyphicon glyphicon-log-out">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-log-out
</span>
</li>
<li>
<span class="glyphicon glyphicon-new-window">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-new-window
</span>
</li>
<li>
<span class="glyphicon glyphicon-record">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-record
</span>
</li>
<li>
<span class="glyphicon glyphicon-save">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-save
</span>
</li>
<li>
<span class="glyphicon glyphicon-open">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-saved">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-saved
</span>
</li>
<li>
<span class="glyphicon glyphicon-import">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-import
</span>
</li>
<li>
<span class="glyphicon glyphicon-export">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-export
</span>
</li>
<li>
<span class="glyphicon glyphicon-send">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-send
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-disk">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-floppy-disk
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-saved">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-floppy-saved
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-remove">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-floppy-remove
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-save">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-floppy-save
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-open">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-floppy-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-credit-card">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-credit-card
</span>
</li>
<li>
<span class="glyphicon glyphicon-transfer">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-transfer
</span>
</li>
<li>
<span class="glyphicon glyphicon-cutlery">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-cutlery
</span>
</li>
<li>
<span class="glyphicon glyphicon-header">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-header
</span>
</li>
<li>
<span class="glyphicon glyphicon-compressed">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-compressed
</span>
</li>
<li>
<span class="glyphicon glyphicon-earphone">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-earphone
</span>
</li>
<li>
<span class="glyphicon glyphicon-phone-alt">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-phone-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-tower">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tower
</span>
</li>
<li>
<span class="glyphicon glyphicon-stats">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-stats
</span>
</li>
<li>
<span class="glyphicon glyphicon-sd-video">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sd-video
</span>
</li>
<li>
<span class="glyphicon glyphicon-hd-video">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-hd-video
</span>
</li>
<li>
<span class="glyphicon glyphicon-subtitles">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-subtitles
</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-stereo">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sound-stereo
</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-dolby">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sound-dolby
</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-5-1">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sound-5-1
</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-6-1">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sound-6-1
</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-7-1">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-sound-7-1
</span>
</li>
<li>
<span class="glyphicon glyphicon-copyright-mark">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-copyright-mark
</span>
</li>
<li>
<span class="glyphicon glyphicon-registration-mark">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-registration-mark
</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud-download">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-cloud-download
</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud-upload">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-cloud-upload
</span>
</li>
<li>
<span class="glyphicon glyphicon-tree-conifer">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tree-conifer
</span>
</li>
<li>
<span class="glyphicon glyphicon-tree-deciduous">
</span>
<span class="glyphicon-class">
glyphicon glyphicon-tree-deciduous
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->
</div>
</div>
<!-- BEGIN PRE-FOOTER -->
<div class="pre-footer">
<div class="container">
<div class="row">
<!-- BEGIN BOTTOM ABOUT BLOCK -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2>About us
</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat.
</p>
<div class="photo-stream">
<h2>Photos Stream
</h2>
<ul class="list-unstyled">
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img5.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img5-small.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img1.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img4-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img6.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img3.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/people/img2-large.jpg"></a></li>
<li><a href="#"><img alt="" src="../../assets/frontend/pages/img/works/img2.jpg"></a></li>
</ul>
</div>
</div>
<!-- END BOTTOM ABOUT BLOCK -->
<!-- BEGIN BOTTOM CONTACTS -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2>Our Contacts
</h2>
<address class="margin-bottom-40">
35, Lorem Lis Street, Park Ave
<br>
California, US
<br>
Phone: 300 323 3456
<br>
Fax: 300 323 1456
<br>
Email:
<a href="mailto:info@metronic.com">info@metronic.com
</a><br>
Skype:
<a href="skype:metronic">metronic
</a>
</address>
<div class="pre-footer-subscribe-box pre-footer-subscribe-box-vertical">
<h2>Newsletter
</h2>
<p>Subscribe to our newsletter and stay up to date with the latest news and deals!
</p>
<form action="#">
<div class="input-group">
<input type="text" placeholder="youremail@mail.com" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Subscribe
</button>
</span>
</div>
</form>
</div>
</div>
<!-- END BOTTOM CONTACTS -->
<!-- BEGIN TWITTER BLOCK -->
<div class="col-md-4 col-sm-6 pre-footer-col">
<h2 class="margin-bottom-0">Latest Tweets
</h2>
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-tweet-limit="2" data-theme="dark" data-link-color="#57C8EB" data-widget-id="455411516829736961" data-chrome="noheader nofooter noscrollbar noborders transparent">Loading tweets by @keenthemes...
</a>
</div>
<!-- END TWITTER BLOCK -->
</div>
</div>
</div>
<!-- END PRE-FOOTER -->
<!-- BEGIN FOOTER -->
<div class="footer">
<div class="container">
<div class="row">
<!-- BEGIN COPYRIGHT -->
<div class="col-md-6 col-sm-6 padding-top-10">
2014 © Metronic Shop UI. ALL Rights Reserved.
<a href="#">Privacy Policy
</a> |
<a href="#">Terms of Service
</a>
</div>
<!-- END COPYRIGHT -->
<!-- BEGIN PAYMENTS -->
<div class="col-md-6 col-sm-6">
<ul class="social-footer list-unstyled list-inline pull-right">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-dropbox"></i></a></li>
</ul>
</div>
<!-- END PAYMENTS -->
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
Metronic.init(); // init global framework features
Layout.init();
Layout.initTwitter();
});
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>