scale-dashboard
Version:
974 lines (755 loc) • 121 kB
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Scale | Web Application</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/icon.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<!--[if lt IE 9]>
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/excanvas.js"></script>
<![endif]-->
</head>
<body class="">
<section class="vbox">
<header class="bg-white header header-md navbar navbar-fixed-top-xs box-shadow">
<div class="navbar-header aside-md dk">
<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav">
<i class="fa fa-bars"></i>
</a>
<a href="index.html" class="navbar-brand">
<img src="images/logo.png" class="m-r-sm" alt="scale">
<span class="hidden-nav-xs">Scale</span>
</a>
<a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
<i class="fa fa-cog"></i>
</a>
</div>
<ul class="nav navbar-nav hidden-xs">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="i i-grid"></i>
</a>
<section class="dropdown-menu aside-lg bg-white on animated fadeInLeft">
<div class="row m-l-none m-r-none m-t m-b text-center">
<div class="col-xs-4">
<div class="padder-v">
<a href="#">
<span class="m-b-xs block">
<i class="i i-mail i-2x text-primary-lt"></i>
</span>
<small class="text-muted">Mailbox</small>
</a>
</div>
</div>
<div class="col-xs-4">
<div class="padder-v">
<a href="#">
<span class="m-b-xs block">
<i class="i i-calendar i-2x text-danger-lt"></i>
</span>
<small class="text-muted">Calendar</small>
</a>
</div>
</div>
<div class="col-xs-4">
<div class="padder-v">
<a href="#">
<span class="m-b-xs block">
<i class="i i-map i-2x text-success-lt"></i>
</span>
<small class="text-muted">Map</small>
</a>
</div>
</div>
<div class="col-xs-4">
<div class="padder-v">
<a href="#">
<span class="m-b-xs block">
<i class="i i-paperplane i-2x text-info-lt"></i>
</span>
<small class="text-muted">Trainning</small>
</a>
</div>
</div>
<div class="col-xs-4">
<div class="padder-v">
<a href="#">
<span class="m-b-xs block">
<i class="i i-images i-2x text-muted"></i>
</span>
<small class="text-muted">Photos</small>
</a>
</div>
</div>
<div class="col-xs-4">
<div class="padder-v">
<a href="#">
<span class="m-b-xs block">
<i class="i i-clock i-2x text-warning-lter"></i>
</span>
<small class="text-muted">Timeline</small>
</a>
</div>
</div>
</div>
</section>
</li>
</ul>
<form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm bg-white b-white btn-icon"><i class="fa fa-search"></i></button>
</span>
<input type="text" class="form-control input-sm no-border" placeholder="Search apps, projects...">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user user">
<li class="hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="i i-chat3"></i>
<span class="badge badge-sm up bg-danger count">2</span>
</a>
<section class="dropdown-menu aside-xl animated flipInY">
<section class="panel bg-white">
<div class="panel-heading b-light bg-light">
<strong>You have <span class="count">2</span> notifications</strong>
</div>
<div class="list-group list-group-alt">
<a href="#" class="media list-group-item">
<span class="pull-left thumb-sm">
<img src="images/a0.png" alt="..." class="img-circle">
</span>
<span class="media-body block m-b-none">
Use awesome animate.css<br>
<small class="text-muted">10 minutes ago</small>
</span>
</a>
<a href="#" class="media list-group-item">
<span class="media-body block m-b-none">
1.0 initial released<br>
<small class="text-muted">1 hour ago</small>
</span>
</a>
</div>
<div class="panel-footer text-sm">
<a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
<a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
</div>
</section>
</section>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="thumb-sm avatar pull-left">
<img src="images/a0.png" alt="...">
</span>
John.Smith <b class="caret"></b>
</a>
<ul class="dropdown-menu animated fadeInRight">
<li>
<span class="arrow top"></span>
<a href="#">Settings</a>
</li>
<li>
<a href="profile.html">Profile</a>
</li>
<li>
<a href="#">
<span class="badge bg-danger pull-right">3</span>
Notifications
</a>
</li>
<li>
<a href="docs.html">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
</li>
</ul>
</li>
</ul>
</header>
<section>
<section class="hbox stretch">
<!-- .aside -->
<aside class="bg-black aside-md hidden-print" id="nav">
<section class="vbox">
<section class="w-f scrollable">
<div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
<div class="clearfix wrapper dk nav-user hidden-xs">
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="thumb avatar pull-left m-r">
<img src="images/a0.png" class="dker" alt="...">
<i class="on md b-black"></i>
</span>
<span class="hidden-nav-xs clear">
<span class="block m-t-xs">
<strong class="font-bold text-lt">John.Smith</strong>
<b class="caret"></b>
</span>
<span class="text-muted text-xs block">Art Director</span>
</span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li>
<span class="arrow top hidden-nav-xs"></span>
<a href="#">Settings</a>
</li>
<li>
<a href="profile.html">Profile</a>
</li>
<li>
<a href="#">
<span class="badge bg-danger pull-right">3</span>
Notifications
</a>
</li>
<li>
<a href="docs.html">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
</li>
</ul>
</div>
</div>
<!-- nav -->
<nav class="nav-primary hidden-xs">
<div class="text-muted text-sm hidden-nav-xs padder m-t-sm m-b-sm">Start</div>
<ul class="nav nav-main" data-ride="collapse">
<li >
<a href="index.html" class="auto">
<i class="i i-statistics icon">
</i>
<span class="font-bold">Overview</span>
</a>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<b class="badge bg-danger pull-right">4</b>
<i class="i i-stack icon">
</i>
<span class="font-bold">Layouts</span>
</a>
<ul class="nav dk">
<li >
<a href="layout-color.html" class="auto">
<i class="i i-dot"></i>
<span>Color option</span>
</a>
</li>
<li >
<a href="layout-hbox.html" class="auto">
<i class="i i-dot"></i>
<span>Hbox layout</span>
</a>
</li>
<li >
<a href="layout-boxed.html" class="auto">
<i class="i i-dot"></i>
<span>Boxed layout</span>
</a>
</li>
<li >
<a href="layout-fluid.html" class="auto">
<i class="i i-dot"></i>
<span>Fluid layout</span>
</a>
</li>
</ul>
</li>
<li class="active">
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-lab icon">
</i>
<span class="font-bold">UI kit</span>
</a>
<ul class="nav dk">
<li >
<a href="buttons.html" class="auto">
<i class="i i-dot"></i>
<span>Buttons</span>
</a>
</li>
<li class="active">
<a href="icons.html" class="auto">
<b class="badge bg-info pull-right">369</b>
<i class="i i-dot"></i>
<span>Icons</span>
</a>
</li>
<li >
<a href="grid.html" class="auto">
<i class="i i-dot"></i>
<span>Grid</span>
</a>
</li>
<li >
<a href="widgets.html" class="auto">
<b class="badge bg-dark pull-right">8</b>
<i class="i i-dot"></i>
<span>Widgets</span>
</a>
</li>
<li >
<a href="components.html" class="auto">
<i class="i i-dot"></i>
<span>Components</span>
</a>
</li>
<li >
<a href="list.html" class="auto">
<i class="i i-dot"></i>
<span>List group</span>
</a>
</li>
<li >
<a href="#table" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-dot"></i>
<span>Table</span>
</a>
<ul class="nav dker">
<li >
<a href="table-static.html">
<i class="i i-dot"></i>
<span>Table static</span>
</a>
</li>
<li >
<a href="table-datatable.html">
<i class="i i-dot"></i>
<span>Datatable</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#form" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-dot"></i>
<span>Form</span>
</a>
<ul class="nav dker">
<li >
<a href="form-elements.html">
<i class="i i-dot"></i>
<span>Form elements</span>
</a>
</li>
<li >
<a href="form-validation.html">
<i class="i i-dot"></i>
<span>Form validation</span>
</a>
</li>
<li >
<a href="form-wizard.html">
<i class="i i-dot"></i>
<span>Form wizard</span>
</a>
</li>
</ul>
</li>
<li >
<a href="chart.html" class="auto">
<i class="i i-dot"></i>
<span>Chart</span>
</a>
</li>
<li >
<a href="portlet.html" class="auto">
<i class="i i-dot"></i>
<span>Portlet</span>
</a>
</li>
<li >
<a href="timeline.html" class="auto">
<i class="i i-dot"></i>
<span>Timeline</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-docs icon">
</i>
<span class="font-bold">Pages</span>
</a>
<ul class="nav dk">
<li >
<a href="profile.html" class="auto">
<i class="i i-dot"></i>
<span>Profile</span>
</a>
</li>
<li >
<a href="invoice.html" class="auto">
<i class="i i-dot"></i>
<span>Invoice</span>
</a>
</li>
<li >
<a href="intro.html" class="auto">
<i class="i i-dot"></i>
<span>Intro</span>
</a>
</li>
<li >
<a href="master.html" class="auto">
<i class="i i-dot"></i>
<span>Master</span>
</a>
</li>
<li >
<a href="gmap.html" class="auto">
<i class="i i-dot"></i>
<span>Google Map</span>
</a>
</li>
<li >
<a href="jvectormap.html" class="auto">
<i class="i i-dot"></i>
<span>Vector Map</span>
</a>
</li>
<li >
<a href="signin.html" class="auto">
<i class="i i-dot"></i>
<span>Signin</span>
</a>
</li>
<li >
<a href="signup.html" class="auto">
<i class="i i-dot"></i>
<span>Signup</span>
</a>
</li>
<li >
<a href="404.html" class="auto">
<i class="i i-dot"></i>
<span>404</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-grid2 icon">
</i>
<span class="font-bold">Apps</span>
</a>
<ul class="nav dk">
<li >
<a href="mail.html" class="auto">
<b class="badge bg-success lt pull-right">2</b>
<i class="i i-dot"></i>
<span>Mailbox</span>
</a>
</li>
<li >
<a href="fullcalendar.html" class="auto">
<i class="i i-dot"></i>
<span>Calendar</span>
</a>
</li>
<li >
<a href="project.html" class="auto">
<i class="i i-dot"></i>
<span>Project</span>
</a>
</li>
<li >
<a href="media.html" class="auto">
<i class="i i-dot"></i>
<span>Media</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="line dk hidden-nav-xs"></div>
<div class="text-muted text-xs hidden-nav-xs padder m-t-sm m-b-sm">Lables</div>
<ul class="nav">
<li>
<a href="mail.html#work">
<i class="i i-circle-sm text-info-dk"></i>
<span>Work space</span>
</a>
</li>
<li>
<a href="mail.html#social">
<i class="i i-circle-sm text-success-dk"></i>
<span>Connection</span>
</a>
</li>
<li>
<a href="mail.html#projects">
<i class="i i-circle-sm text-danger-dk"></i>
<span>Projects</span>
</a>
</li>
</ul>
<div class="text-muted text-xs hidden-nav-xs padder m-t-sm m-b-sm">Circles</div>
<ul class="nav">
<li>
<a href="#">
<i class="i i-circle-sm-o text-success-lt"></i>
<span>College</span>
</a>
</li>
<li>
<a href="#">
<i class="i i-circle-sm-o text-warning"></i>
<span>Social</span>
</a>
</li>
</ul>
</nav>
<!-- / nav -->
</div>
</section>
<footer class="footer hidden-xs no-padder text-center-nav-xs">
<a href="modal.lockme.html" data-toggle="ajaxModal" class="btn btn-icon icon-muted btn-inactive pull-right m-l-xs m-r-xs hidden-nav-xs">
<i class="i i-logout"></i>
</a>
<a href="#nav" data-toggle="class:nav-xs" class="btn btn-icon icon-muted btn-inactive m-l-xs m-r-xs">
<i class="i i-circleleft text"></i>
<i class="i i-circleright text-active"></i>
</a>
</footer>
</section>
</aside>
<!-- /.aside -->
<section id="content">
<section class="vbox">
<header class="header bg-white b-b b-light">
<p>FontAwesome! <span class="label label-lg bg-info">4.0</span></p>
</header>
<section class="scrollable wrapper">
<h3>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.</h3>
<div>
<section id="web-application">
<h4 class="page-header">Web Application Icons</h4>
<div class="row list-icon">
<div class="col-md-3 col-sm-4"><i class="fa fa-adjust"></i> fa-adjust</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-anchor"></i> fa-anchor</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-archive"></i> fa-archive</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-arrows"></i> fa-arrows</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-arrows-h"></i> fa-arrows-h</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-arrows-v"></i> fa-arrows-v</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-asterisk"></i> fa-asterisk</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-ban"></i> fa-ban</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bar-chart-o"></i> fa-bar-chart-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-barcode"></i> fa-barcode</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bars"></i> fa-bars</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-beer"></i> fa-beer</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bell"></i> fa-bell</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bell-o"></i> fa-bell-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bolt"></i> fa-bolt</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-book"></i> fa-book</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bookmark"></i> fa-bookmark</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bookmark-o"></i> fa-bookmark-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-briefcase"></i> fa-briefcase</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bug"></i> fa-bug</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-building-o"></i> fa-building-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bullhorn"></i> fa-bullhorn</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-bullseye"></i> fa-bullseye</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-calendar"></i> fa-calendar</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-calendar-o"></i> fa-calendar-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-camera"></i> fa-camera</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-camera-retro"></i> fa-camera-retro</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-certificate"></i> fa-certificate</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-check"></i> fa-check</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-check-circle"></i> fa-check-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-check-circle-o"></i> fa-check-circle-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-check-square"></i> fa-check-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-check-square-o"></i> fa-check-square-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-circle"></i> fa-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-circle-o"></i> fa-circle-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-clock-o"></i> fa-clock-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-cloud"></i> fa-cloud</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-cloud-download"></i> fa-cloud-download</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-cloud-upload"></i> fa-cloud-upload</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-code"></i> fa-code</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-code-fork"></i> fa-code-fork</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-coffee"></i> fa-coffee</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-cog"></i> fa-cog</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-cogs"></i> fa-cogs</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-comment"></i> fa-comment</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-comment-o"></i> fa-comment-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-comments"></i> fa-comments</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-comments-o"></i> fa-comments-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-compass"></i> fa-compass</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-credit-card"></i> fa-credit-card</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-crop"></i> fa-crop</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-crosshairs"></i> fa-crosshairs</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-cutlery"></i> fa-cutlery</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-dashboard"></i> fa-dashboard <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-desktop"></i> fa-desktop</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-download"></i> fa-download</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-edit"></i> fa-edit <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-ellipsis-h"></i> fa-ellipsis-h</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-ellipsis-v"></i> fa-ellipsis-v</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-envelope"></i> fa-envelope</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-envelope-o"></i> fa-envelope-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-eraser"></i> fa-eraser</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-exchange"></i> fa-exchange</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-exclamation"></i> fa-exclamation</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-exclamation-circle"></i> fa-exclamation-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-external-link"></i> fa-external-link</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-external-link-square"></i> fa-external-link-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-eye"></i> fa-eye</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-eye-slash"></i> fa-eye-slash</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-female"></i> fa-female</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-fighter-jet"></i> fa-fighter-jet</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-film"></i> fa-film</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-filter"></i> fa-filter</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-fire"></i> fa-fire</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-fire-extinguisher"></i> fa-fire-extinguisher</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-flag"></i> fa-flag</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-flag-checkered"></i> fa-flag-checkered</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-flag-o"></i> fa-flag-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-flash"></i> fa-flash <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-flask"></i> fa-flask</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-folder"></i> fa-folder</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-folder-o"></i> fa-folder-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-folder-open"></i> fa-folder-open</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-folder-open-o"></i> fa-folder-open-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-frown-o"></i> fa-frown-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-gamepad"></i> fa-gamepad</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-gavel"></i> fa-gavel</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-gear"></i> fa-gear <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-gears"></i> fa-gears <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-gift"></i> fa-gift</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-glass"></i> fa-glass</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-globe"></i> fa-globe</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-group"></i> fa-group <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-hdd-o"></i> fa-hdd-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-headphones"></i> fa-headphones</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-heart"></i> fa-heart</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-heart-o"></i> fa-heart-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-home"></i> fa-home</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-inbox"></i> fa-inbox</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-info"></i> fa-info</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-info-circle"></i> fa-info-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-key"></i> fa-key</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-keyboard-o"></i> fa-keyboard-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-laptop"></i> fa-laptop</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-leaf"></i> fa-leaf</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-legal"></i> fa-legal <span class="text-muted">(alias)</span></div>
<div class="col-md-3 col-sm-4"><i class="fa fa-lemon-o"></i> fa-lemon-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-level-down"></i> fa-level-down</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-level-up"></i> fa-level-up</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-lightbulb-o"></i> fa-lightbulb-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-location-arrow"></i> fa-location-arrow</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-lock"></i> fa-lock</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-magic"></i> fa-magic</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-magnet"></i> fa-magnet</div>
<div class="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="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="col-md-3 col-sm-4"><i class="fa fa-mail-reply-all"></i> fa-mail-reply-all</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-male"></i> fa-male</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-map-marker"></i> fa-map-marker</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-meh-o"></i> fa-meh-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-microphone"></i> fa-microphone</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-microphone-slash"></i> fa-microphone-slash</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-minus"></i> fa-minus</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-minus-circle"></i> fa-minus-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-minus-square"></i> fa-minus-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-minus-square-o"></i> fa-minus-square-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-mobile"></i> fa-mobile</div>
<div class="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="col-md-3 col-sm-4"><i class="fa fa-money"></i> fa-money</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-moon-o"></i> fa-moon-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-music"></i> fa-music</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-pencil"></i> fa-pencil</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-pencil-square"></i> fa-pencil-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-pencil-square-o"></i> fa-pencil-square-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-phone"></i> fa-phone</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-phone-square"></i> fa-phone-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-picture-o"></i> fa-picture-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-plane"></i> fa-plane</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-plus"></i> fa-plus</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-plus-circle"></i> fa-plus-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-plus-square"></i> fa-plus-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-power-off"></i> fa-power-off</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-print"></i> fa-print</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-puzzle-piece"></i> fa-puzzle-piece</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-qrcode"></i> fa-qrcode</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-question"></i> fa-question</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-question-circle"></i> fa-question-circle</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-quote-left"></i> fa-quote-left</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-quote-right"></i> fa-quote-right</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-random"></i> fa-random</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-refresh"></i> fa-refresh</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-reply"></i> fa-reply</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-reply-all"></i> fa-reply-all</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-retweet"></i> fa-retweet</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-road"></i> fa-road</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-rocket"></i> fa-rocket</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-rss"></i> fa-rss</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-rss-square"></i> fa-rss-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-search"></i> fa-search</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-search-minus"></i> fa-search-minus</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-search-plus"></i> fa-search-plus</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-share"></i> fa-share</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-share-square"></i> fa-share-square</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-share-square-o"></i> fa-share-square-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-shield"></i> fa-shield</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-shopping-cart"></i> fa-shopping-cart</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sign-in"></i> fa-sign-in</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sign-out"></i> fa-sign-out</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-signal"></i> fa-signal</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sitemap"></i> fa-sitemap</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-smile-o"></i> fa-smile-o</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort"></i> fa-sort</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort-alpha-asc"></i> fa-sort-alpha-asc</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort-alpha-desc"></i> fa-sort-alpha-desc</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort-amount-asc"></i> fa-sort-amount-asc</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort-amount-desc"></i> fa-sort-amount-desc</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort-asc"></i> fa-sort-asc</div>
<div class="col-md-3 col-sm-4"><i class="fa fa-sort-desc"></i> fa-sort-desc</div>