Foundation
Colors
Palette
  • Primary

    #428BCA
    #3874A9
  • Success

    #5CB85C
    #4D984D
  • Info

    #5BC0DE
    #59A4C4
  • Warning

    #F0AD4E
    #BA8540
  • Danger

    #D9534F
    #B04341
<ul class="cl-palette">
    <li>
        <h3>Primary</h3>
        <div style="background-color: #428BCA;" class="color"><span>#428BCA</span></div>
        <div style="background-color: #3874A9;" class="color"><span>#3874A9</span></div>
    </li>
    <li>
        <h3>Success</h3>
        <div style="background-color: #5CB85C;" class="color"><span>#5CB85C</span></div>
        <div style="background-color: #4D984D;" class="color"><span>#4D984D</span></div>
    </li>
    <li>
        <h3>Info</h3>
        <div style="background-color: #5BC0DE;" class="color"><span>#5BC0DE</span></div>
        <div style="background-color: #59A4C4;" class="color"><span>#59A4C4</span></div>
    </li>
    <li>
        <h3>Warning</h3>
        <div style="background-color: #F0AD4E;" class="color"><span>#F0AD4E</span></div>
        <div style="background-color: #BA8540;" class="color"><span>#BA8540</span></div>
    </li>
    <li>
        <h3>Danger</h3>
        <div style="background-color: #D9534F;" class="color"><span>#D9534F</span></div>
        <div style="background-color: #B04341;" class="color"><span>#B04341</span></div>
    </li>
</ul>
Color classes

Muted text

Primary text

Info text

Success text

Danger text

Warning text

<p class="text-muted">Muted text</p>
<p class="text-primary">Primary text</p>
<p class="text-info">Info text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
Background utilities

Primary Background

Info Background

Success Background

Danger Background

Warning Background

<p class="bg-primary" style="padding:15px;">Primary Background</p>
<p class="bg-info" style="padding:15px;">Info Background</p>
<p class="bg-success" style="padding:15px;">Success Background</p>
<p class="bg-danger" style="padding:15px;">Danger Background</p>
<p class="bg-warning" style="padding:15px;">Warning Background</p>
Grid
Simple grid
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="container">
    <div class="row cl-show-grid">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>

    <div class="row cl-show-grid">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row cl-show-grid">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row cl-show-grid">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
Addresses
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
</address>
Alerts
Warning Message! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error Message! Numquam quos fuga quam suscipit sapiente perferendis magnam.
Success Message! Totam officiis dolorum voluptatibus maxime molestiae iste.
Info Message! Consequatur facere deleniti cumque ducimus maiores nemo.
<div class="alert alert-warning">
    <strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger">
    <strong>Error Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>
<div class="alert alert-success">
    <strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>
<div class="alert alert-info">
    <strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
Badges
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>
            Home
        </a>
    </li>
    <li><a href="#">Profile</a></li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>
            Messages
        </a>
    </li>
</ul>
<br>
<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>
Buttons
Basic

<p>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
</p>
<p>
    <button type="button" class="btn btn-default disabled">Default</button>
    <button type="button" class="btn btn-primary disabled">Primary</button>
    <button type="button" class="btn btn-success disabled">Success</button>
    <button type="button" class="btn btn-info disabled">Info</button>
    <button type="button" class="btn btn-warning disabled">Warning</button>
    <button type="button" class="btn btn-danger disabled">Danger</button>
    <button type="button" class="btn btn-link disabled">Link</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-lg">Large</button>
    <button type="button" class="btn btn-primary disabled">Disabled</button>
    <button type="button" class="btn btn-primary">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Small</button>
    <button type="button" class="btn btn-primary btn-xs">Extra Small</button>
</p>
Button groups
<div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-lg">
        <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>
<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <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>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-sm">
                <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>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-xs">
                <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>
    </div>
</div>
Justified
<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>
Vertical
<div class="btn-group-vertical">
    <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>
</div>
With dropdowns
<div class="row">
    <div class="col-md-12">
        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown</button>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</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><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</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><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">Success</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><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</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><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</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><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</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><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <div class="col-md-12">
        <!--split-->
        <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" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </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><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"><span class="sr-only">Toggle Dropdown</span><span
                    class="caret"></span></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><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"><span
                    class="caret"></span><span class="sr-only">Toggle Dropdown</span></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><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"><span
                    class="caret"></span> <span class="sr-only">Toggle Dropdown</span></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><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"><span
                    class="caret"></span> <span class="sr-only">Toggle Dropdown</span></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><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"><span
                    class="caret"></span><span class="sr-only">Toggle Dropdown</span></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><a href="#">Separated link</a></li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <div class="col-md-12">
        <!-- Large button group -->
        <div class="btn-group">
            <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Large button
            </button>
            <div style="margin-left: 2em" class="dropdown-menu">
                ...
            </div>
        </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>
            <div style="margin-left: 2em" class="dropdown-menu">
                ...
            </div>
        </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>
            <div style="margin-left: 2em" class="dropdown-menu">
                ...
            </div>
        </div>
    </div>
</div>
Definition lists
Vertical
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
Horizontal
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
    <dt>Felis euismod semper eget lacinia</dt>
    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
        risus.
    </dd>
</dl>
Dropdowns
<div class="dropdown">
    <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation" class="dropdown-header">Dropdown header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">Dropdown header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>
<div class="dropdown clearfix">
    <!-- Link or button to toggle dropdown -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static;">
        <li class="dropdown-header">Dropdown header</li>
        <li class="disabled">
            <a tabindex="-1" href="#">Action</a>
        </li>
        <li>
            <a tabindex="-1" href="#">Another action</a>
        </li>
        <li>
            <a tabindex="-1" href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li>
            <a tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</div>
Forms
Basic example

Example block-level help text here.

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
Inline form
<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>
Horizontal form
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
Images

<p>
    <img src="//placehold.it/120x120" class="img-rounded">
    <img src="//placehold.it/120x120" class="img-circle">
    <img src="//placehold.it/120x120" class="img-thumbnail">
</p>
<p>
<img src="//placehold.it/1200x300" class="img-responsive"/>
Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default Primary Success Info Warning Danger
<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Tables
# First Name Tables
1 Michael Are formatted like this
2 Lucille Do you like them?
3 Success
4 Danger
5 Warning
6 Active

Striped & condensed table with alternating backgrounds

# First Name Tables
1 Michael This one is bordered and condensed
2 Lucille Do you still like it?
<table class="table table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Tables</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Michael</td>
        <td>Are formatted like this</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lucille</td>
        <td>Do you like them?</td>
    </tr>
    <tr class="success">
        <td>3</td>
        <td>Success</td>
        <td></td>
    </tr>
    <tr class="danger">
        <td>4</td>
        <td>Danger</td>
        <td></td>
    </tr>
    <tr class="warning">
        <td>5</td>
        <td>Warning</td>
        <td></td>
    </tr>
    <tr class="active">
        <td>6</td>
        <td>Active</td>
        <td></td>
    </tr>
    </tbody>
</table>
<h3>Striped &amp; condensed table with alternating backgrounds</h3>
<table class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Tables</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Michael</td>
        <td>This one is bordered and condensed</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lucille</td>
        <td>Do you still like it?</td>
    </tr>
    </tbody>
</table>
Typography
Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Blockquote reverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Emphasis
Bold text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<strong>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</strong>
Italics text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<em>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</em>
Small text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<small>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</small>
Lists
List inline
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<ul class="list-inline">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>
List ordered
  1. List Item 1
  2. List Item 2
  3. List Item 3
    • List Item 3.1
    • List Item 3.2
    • List Item 3.3
    • List Item 3.4
  4. List Item 4
<ol>
  <li>List Item 1
    <li>List Item 2</li>
    <li>List Item 3
      <ul>
        <li>List Item 3.1</li>
        <li>List Item 3.2</li>
        <li>List Item 3.3</li>
        <li>List Item 3.4</li>
      </ul>
    </li>
    <li>List Item 4</li>
  </li>
</ol>
List unordered
  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
    • List Item 3.3
    • List Item 3.4
  • List Item 4
<ul>
  <li>List Item 1
    <li>List Item 2</li>
    <li>List Item 3
      <ul>
        <li>List Item 3.1</li>
        <li>List Item 3.2</li>
        <li>List Item 3.3</li>
        <li>List Item 3.4</li>
      </ul>
    </li>
    <li>List Item 4</li>
  </li>
</ul>
List unstyled
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<ul class="list-unstyled">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>
Body copy

Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

<p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est
    non commodo luctus.</p>
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>
    <small>This line of text is meant to be treated as fine print.</small>
</p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Lead copy

This is an example of a lead paragraph. WinShape Camps offers day and overnight summer camp experiences for boys and girls of all ages.

<p class="lead">This is an example of a lead paragraph. WinShape Camps offers day and overnight summer camp experiences for boys and girls of all ages.</p>
Links
<a href="#">Default link</a>
Text alignment

Left Alignment

Center Alignment

Right Alignment

Justified Text

<p class="text-left">Left Alignment</p>
<p class="text-center">Center Alignment</p>
<p class="text-right">Right Alignment</p>
<p class="text-justify">Justified Text</p>
Well
Look, I'm in a well!
Small Well
Large Padding Well
<div class="well">
    Look, I'm in a well!
</div>
<div class="well well-sm">
    Small Well
</div>
<div class="well well-lg">
    Large Padding Well
</div>
Icons

All icons are listed below and can only be used using the fa class.

  • glass
  • music
  • search
  • envelope-o
  • heart
  • star
  • star-o
  • user
  • film
  • th-large
  • th
  • th-list
  • check
  • remove
  • close
  • times
  • search-plus
  • search-minus
  • power-off
  • signal
  • gear
  • cog
  • trash-o
  • home
  • file-o
  • clock-o
  • road
  • download
  • arrow-circle-o-down
  • arrow-circle-o-up
  • inbox
  • play-circle-o
  • rotate-right
  • repeat
  • refresh
  • list-alt
  • lock
  • flag
  • headphones
  • volume-off
  • volume-down
  • volume-up
  • qrcode
  • barcode
  • tag
  • tags
  • book
  • bookmark
  • print
  • camera
  • font
  • bold
  • italic
  • text-height
  • text-width
  • align-left
  • align-center
  • align-right
  • align-justify
  • list
  • dedent
  • outdent
  • indent
  • video-camera
  • photo
  • image
  • picture-o
  • pencil
  • map-marker
  • adjust
  • tint
  • edit
  • pencil-square-o
  • share-square-o
  • check-square-o
  • arrows
  • step-backward
  • fast-backward
  • backward
  • play
  • pause
  • stop
  • forward
  • fast-forward
  • step-forward
  • eject
  • chevron-left
  • chevron-right
  • plus-circle
  • minus-circle
  • times-circle
  • check-circle
  • question-circle
  • info-circle
  • crosshairs
  • times-circle-o
  • check-circle-o
  • ban
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • mail-forward
  • share
  • expand
  • compress
  • plus
  • minus
  • asterisk
  • exclamation-circle
  • gift
  • leaf
  • fire
  • eye
  • eye-slash
  • warning
  • exclamation-triangle
  • plane
  • calendar
  • random
  • comment
  • magnet
  • chevron-up
  • chevron-down
  • retweet
  • shopping-cart
  • folder
  • folder-open
  • arrows-v
  • arrows-h
  • bar-chart-o
  • bar-chart
  • twitter-square
  • facebook-square
  • camera-retro
  • key
  • gears
  • cogs
  • comments
  • thumbs-o-up
  • thumbs-o-down
  • star-half
  • heart-o
  • sign-out
  • linkedin-square
  • thumb-tack
  • external-link
  • sign-in
  • trophy
  • github-square
  • upload
  • lemon-o
  • phone
  • square-o
  • bookmark-o
  • phone-square
  • twitter
  • facebook-f
  • facebook
  • github
  • unlock
  • credit-card
  • feed
  • rss
  • hdd-o
  • bullhorn
  • bell
  • certificate
  • hand-o-right
  • hand-o-left
  • hand-o-up
  • hand-o-down
  • arrow-circle-left
  • arrow-circle-right
  • arrow-circle-up
  • arrow-circle-down
  • globe
  • wrench
  • tasks
  • filter
  • briefcase
  • arrows-alt
  • group
  • users
  • chain
  • link
  • cloud
  • flask
  • cut
  • scissors
  • copy
  • files-o
  • paperclip
  • save
  • floppy-o
  • square
  • navicon
  • reorder
  • bars
  • list-ul
  • list-ol
  • strikethrough
  • underline
  • table
  • magic
  • truck
  • pinterest
  • pinterest-square
  • google-plus-square
  • google-plus
  • money
  • caret-down
  • caret-up
  • caret-left
  • caret-right
  • columns
  • unsorted
  • sort
  • sort-down
  • sort-desc
  • sort-up
  • sort-asc
  • envelope
  • linkedin
  • rotate-left
  • undo
  • legal
  • gavel
  • dashboard
  • tachometer
  • comment-o
  • comments-o
  • flash
  • bolt
  • sitemap
  • umbrella
  • paste
  • clipboard
  • lightbulb-o
  • exchange
  • cloud-download
  • cloud-upload
  • user-md
  • stethoscope
  • suitcase
  • bell-o
  • coffee
  • cutlery
  • file-text-o
  • building-o
  • hospital-o
  • ambulance
  • medkit
  • fighter-jet
  • beer
  • h-square
  • plus-square
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-double-down
  • angle-left
  • angle-right
  • angle-up
  • angle-down
  • desktop
  • laptop
  • tablet
  • mobile-phone
  • mobile
  • circle-o
  • quote-left
  • quote-right
  • spinner
  • circle
  • mail-reply
  • reply
  • github-alt
  • folder-o
  • folder-open-o
  • smile-o
  • frown-o
  • meh-o
  • gamepad
  • keyboard-o
  • flag-o
  • flag-checkered
  • terminal
  • code
  • mail-reply-all
  • reply-all
  • star-half-empty
  • star-half-full
  • star-half-o
  • location-arrow
  • crop
  • code-fork
  • unlink
  • chain-broken
  • question
  • info
  • exclamation
  • superscript
  • subscript
  • eraser
  • puzzle-piece
  • microphone
  • microphone-slash
  • shield
  • calendar-o
  • fire-extinguisher
  • rocket
  • maxcdn
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-circle-down
  • html5
  • css3
  • anchor
  • unlock-alt
  • bullseye
  • ellipsis-h
  • ellipsis-v
  • rss-square
  • play-circle
  • ticket
  • minus-square
  • minus-square-o
  • level-up
  • level-down
  • check-square
  • pencil-square
  • external-link-square
  • share-square
  • compass
  • toggle-down
  • caret-square-o-down
  • toggle-up
  • caret-square-o-up
  • toggle-right
  • caret-square-o-right
  • euro
  • eur
  • gbp
  • dollar
  • usd
  • rupee
  • inr
  • cny
  • rmb
  • yen
  • jpy
  • ruble
  • rouble
  • rub
  • won
  • krw
  • bitcoin
  • btc
  • file
  • file-text
  • sort-alpha-asc
  • sort-alpha-desc
  • sort-amount-asc
  • sort-amount-desc
  • sort-numeric-asc
  • sort-numeric-desc
  • thumbs-up
  • thumbs-down
  • youtube-square
  • youtube
  • xing
  • xing-square
  • youtube-play
  • dropbox
  • stack-overflow
  • instagram
  • flickr
  • adn
  • bitbucket
  • bitbucket-square
  • tumblr
  • tumblr-square
  • long-arrow-down
  • long-arrow-up
  • long-arrow-left
  • long-arrow-right
  • apple
  • windows
  • android
  • linux
  • dribbble
  • skype
  • foursquare
  • trello
  • female
  • male
  • gittip
  • gratipay
  • sun-o
  • moon-o
  • archive
  • bug
  • vk
  • weibo
  • renren
  • pagelines
  • stack-exchange
  • arrow-circle-o-right
  • arrow-circle-o-left
  • toggle-left
  • caret-square-o-left
  • dot-circle-o
  • wheelchair
  • vimeo-square
  • turkish-lira
  • try
  • plus-square-o
  • space-shuttle
  • slack
  • envelope-square
  • wordpress
  • openid
  • institution
  • bank
  • university
  • mortar-board
  • graduation-cap
  • yahoo
  • google
  • reddit
  • reddit-square
  • stumbleupon-circle
  • stumbleupon
  • delicious
  • digg
  • pied-piper-pp
  • pied-piper-alt
  • drupal
  • joomla
  • language
  • fax
  • building
  • child
  • paw
  • spoon
  • cube
  • cubes
  • behance
  • behance-square
  • steam
  • steam-square
  • recycle
  • automobile
  • car
  • cab
  • taxi
  • tree
  • spotify
  • deviantart
  • soundcloud
  • database
  • file-pdf-o
  • file-word-o
  • file-excel-o
  • file-powerpoint-o
  • file-photo-o
  • file-picture-o
  • file-image-o
  • file-zip-o
  • file-archive-o
  • file-sound-o
  • file-audio-o
  • file-movie-o
  • file-video-o
  • file-code-o
  • vine
  • codepen
  • jsfiddle
  • life-bouy
  • life-buoy
  • life-saver
  • support
  • life-ring
  • circle-o-notch
  • ra
  • resistance
  • rebel
  • ge
  • empire
  • git-square
  • git
  • y-combinator-square
  • yc-square
  • hacker-news
  • tencent-weibo
  • qq
  • wechat
  • weixin
  • send
  • paper-plane
  • send-o
  • paper-plane-o
  • history
  • circle-thin
  • header
  • paragraph
  • sliders
  • share-alt
  • share-alt-square
  • bomb
  • soccer-ball-o
  • futbol-o
  • tty
  • binoculars
  • plug
  • slideshare
  • twitch
  • yelp
  • newspaper-o
  • wifi
  • calculator
  • paypal
  • google-wallet
  • cc-visa
  • cc-mastercard
  • cc-discover
  • cc-amex
  • cc-paypal
  • cc-stripe
  • bell-slash
  • bell-slash-o
  • trash
  • copyright
  • at
  • eyedropper
  • paint-brush
  • birthday-cake
  • area-chart
  • pie-chart
  • line-chart
  • lastfm
  • lastfm-square
  • toggle-off
  • toggle-on
  • bicycle
  • bus
  • ioxhost
  • angellist
  • cc
  • shekel
  • sheqel
  • ils
  • meanpath
  • buysellads
  • connectdevelop
  • dashcube
  • forumbee
  • leanpub
  • sellsy
  • shirtsinbulk
  • simplybuilt
  • skyatlas
  • cart-plus
  • cart-arrow-down
  • diamond
  • ship
  • user-secret
  • motorcycle
  • street-view
  • heartbeat
  • venus
  • mars
  • mercury
  • intersex
  • transgender
  • transgender-alt
  • venus-double
  • mars-double
  • venus-mars
  • mars-stroke
  • mars-stroke-v
  • mars-stroke-h
  • neuter
  • genderless
  • facebook-official
  • pinterest-p
  • whatsapp
  • server
  • user-plus
  • user-times
  • hotel
  • bed
  • viacoin
  • train
  • subway
  • medium
  • yc
  • y-combinator
  • optin-monster
  • opencart
  • expeditedssl
  • battery-4
  • battery-full
  • battery-3
  • battery-three-quarters
  • battery-2
  • battery-half
  • battery-1
  • battery-quarter
  • battery-0
  • battery-empty
  • mouse-pointer
  • i-cursor
  • object-group
  • object-ungroup
  • sticky-note
  • sticky-note-o
  • cc-jcb
  • cc-diners-club
  • clone
  • balance-scale
  • hourglass-o
  • hourglass-1
  • hourglass-start
  • hourglass-2
  • hourglass-half
  • hourglass-3
  • hourglass-end
  • hourglass
  • hand-grab-o
  • hand-rock-o
  • hand-stop-o
  • hand-paper-o
  • hand-scissors-o
  • hand-lizard-o
  • hand-spock-o
  • hand-pointer-o
  • hand-peace-o
  • trademark
  • registered
  • creative-commons
  • gg
  • gg-circle
  • tripadvisor
  • odnoklassniki
  • odnoklassniki-square
  • get-pocket
  • wikipedia-w
  • safari
  • chrome
  • firefox
  • opera
  • internet-explorer
  • tv
  • television
  • contao
  • 500px
  • amazon
  • calendar-plus-o
  • calendar-minus-o
  • calendar-times-o
  • calendar-check-o
  • industry
  • map-pin
  • map-signs
  • map-o
  • map
  • commenting
  • commenting-o
  • houzz
  • vimeo
  • black-tie
  • fonticons
  • reddit-alien
  • edge
  • credit-card-alt
  • codiepie
  • modx
  • fort-awesome
  • usb
  • product-hunt
  • mixcloud
  • scribd
  • pause-circle
  • pause-circle-o
  • stop-circle
  • stop-circle-o
  • shopping-bag
  • shopping-basket
  • hashtag
  • bluetooth
  • bluetooth-b
  • percent
  • gitlab
  • wpbeginner
  • wpforms
  • envira
  • universal-access
  • wheelchair-alt
  • question-circle-o
  • blind
  • audio-description
  • volume-control-phone
  • braille
  • assistive-listening-systems
  • asl-interpreting
  • american-sign-language-interpreting
  • deafness
  • hard-of-hearing
  • deaf
  • glide
  • glide-g
  • signing
  • sign-language
  • low-vision
  • viadeo
  • viadeo-square
  • snapchat
  • snapchat-ghost
  • snapchat-square
  • pied-piper
  • first-order
  • yoast
  • themeisle
  • google-plus-circle
  • google-plus-official
  • fa
  • font-awesome
<p>
    All icons are listed below and can only be used using the <code>fa</code> class.
    <i class="fa fa-info-circle"></i>
</p>

<ul class="cl-icon-list">
    <li>
        <span><i class="fa fa-glass"></i></span>
        <span>glass</span>
    </li>
    <li>
        <span><i class="fa fa-music"></i></span>
        <span>music</span>
    </li>
    <li>
        <span><i class="fa fa-search"></i></span>
        <span>search</span>
    </li>
    <li>
        <span><i class="fa fa-envelope-o"></i></span>
        <span>envelope-o</span>
    </li>
    <li>
        <span><i class="fa fa-heart"></i></span>
        <span>heart</span>
    </li>
    <li>
        <span><i class="fa fa-star"></i></span>
        <span>star</span>
    </li>
    <li>
        <span><i class="fa fa-star-o"></i></span>
        <span>star-o</span>
    </li>
    <li>
        <span><i class="fa fa-user"></i></span>
        <span>user</span>
    </li>
    <li>
        <span><i class="fa fa-film"></i></span>
        <span>film</span>
    </li>
    <li>
        <span><i class="fa fa-th-large"></i></span>
        <span>th-large</span>
    </li>
    <li>
        <span><i class="fa fa-th"></i></span>
        <span>th</span>
    </li>
    <li>
        <span><i class="fa fa-th-list"></i></span>
        <span>th-list</span>
    </li>
    <li>
        <span><i class="fa fa-check"></i></span>
        <span>check</span>
    </li>
    <li>
        <span><i class="fa fa-remove"></i></span>
        <span>remove</span>
    </li>
    <li>
        <span><i class="fa fa-close"></i></span>
        <span>close</span>
    </li>
    <li>
        <span><i class="fa fa-times"></i></span>
        <span>times</span>
    </li>
    <li>
        <span><i class="fa fa-search-plus"></i></span>
        <span>search-plus</span>
    </li>
    <li>
        <span><i class="fa fa-search-minus"></i></span>
        <span>search-minus</span>
    </li>
    <li>
        <span><i class="fa fa-power-off"></i></span>
        <span>power-off</span>
    </li>
    <li>
        <span><i class="fa fa-signal"></i></span>
        <span>signal</span>
    </li>
    <li>
        <span><i class="fa fa-gear"></i></span>
        <span>gear</span>
    </li>
    <li>
        <span><i class="fa fa-cog"></i></span>
        <span>cog</span>
    </li>
    <li>
        <span><i class="fa fa-trash-o"></i></span>
        <span>trash-o</span>
    </li>
    <li>
        <span><i class="fa fa-home"></i></span>
        <span>home</span>
    </li>
    <li>
        <span><i class="fa fa-file-o"></i></span>
        <span>file-o</span>
    </li>
    <li>
        <span><i class="fa fa-clock-o"></i></span>
        <span>clock-o</span>
    </li>
    <li>
        <span><i class="fa fa-road"></i></span>
        <span>road</span>
    </li>
    <li>
        <span><i class="fa fa-download"></i></span>
        <span>download</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-down"></i></span>
        <span>arrow-circle-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-up"></i></span>
        <span>arrow-circle-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-inbox"></i></span>
        <span>inbox</span>
    </li>
    <li>
        <span><i class="fa fa-play-circle-o"></i></span>
        <span>play-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-rotate-right"></i></span>
        <span>rotate-right</span>
    </li>
    <li>
        <span><i class="fa fa-repeat"></i></span>
        <span>repeat</span>
    </li>
    <li>
        <span><i class="fa fa-refresh"></i></span>
        <span>refresh</span>
    </li>
    <li>
        <span><i class="fa fa-list-alt"></i></span>
        <span>list-alt</span>
    </li>
    <li>
        <span><i class="fa fa-lock"></i></span>
        <span>lock</span>
    </li>
    <li>
        <span><i class="fa fa-flag"></i></span>
        <span>flag</span>
    </li>
    <li>
        <span><i class="fa fa-headphones"></i></span>
        <span>headphones</span>
    </li>
    <li>
        <span><i class="fa fa-volume-off"></i></span>
        <span>volume-off</span>
    </li>
    <li>
        <span><i class="fa fa-volume-down"></i></span>
        <span>volume-down</span>
    </li>
    <li>
        <span><i class="fa fa-volume-up"></i></span>
        <span>volume-up</span>
    </li>
    <li>
        <span><i class="fa fa-qrcode"></i></span>
        <span>qrcode</span>
    </li>
    <li>
        <span><i class="fa fa-barcode"></i></span>
        <span>barcode</span>
    </li>
    <li>
        <span><i class="fa fa-tag"></i></span>
        <span>tag</span>
    </li>
    <li>
        <span><i class="fa fa-tags"></i></span>
        <span>tags</span>
    </li>
    <li>
        <span><i class="fa fa-book"></i></span>
        <span>book</span>
    </li>
    <li>
        <span><i class="fa fa-bookmark"></i></span>
        <span>bookmark</span>
    </li>
    <li>
        <span><i class="fa fa-print"></i></span>
        <span>print</span>
    </li>
    <li>
        <span><i class="fa fa-camera"></i></span>
        <span>camera</span>
    </li>
    <li>
        <span><i class="fa fa-font"></i></span>
        <span>font</span>
    </li>
    <li>
        <span><i class="fa fa-bold"></i></span>
        <span>bold</span>
    </li>
    <li>
        <span><i class="fa fa-italic"></i></span>
        <span>italic</span>
    </li>
    <li>
        <span><i class="fa fa-text-height"></i></span>
        <span>text-height</span>
    </li>
    <li>
        <span><i class="fa fa-text-width"></i></span>
        <span>text-width</span>
    </li>
    <li>
        <span><i class="fa fa-align-left"></i></span>
        <span>align-left</span>
    </li>
    <li>
        <span><i class="fa fa-align-center"></i></span>
        <span>align-center</span>
    </li>
    <li>
        <span><i class="fa fa-align-right"></i></span>
        <span>align-right</span>
    </li>
    <li>
        <span><i class="fa fa-align-justify"></i></span>
        <span>align-justify</span>
    </li>
    <li>
        <span><i class="fa fa-list"></i></span>
        <span>list</span>
    </li>
    <li>
        <span><i class="fa fa-dedent"></i></span>
        <span>dedent</span>
    </li>
    <li>
        <span><i class="fa fa-outdent"></i></span>
        <span>outdent</span>
    </li>
    <li>
        <span><i class="fa fa-indent"></i></span>
        <span>indent</span>
    </li>
    <li>
        <span><i class="fa fa-video-camera"></i></span>
        <span>video-camera</span>
    </li>
    <li>
        <span><i class="fa fa-photo"></i></span>
        <span>photo</span>
    </li>
    <li>
        <span><i class="fa fa-image"></i></span>
        <span>image</span>
    </li>
    <li>
        <span><i class="fa fa-picture-o"></i></span>
        <span>picture-o</span>
    </li>
    <li>
        <span><i class="fa fa-pencil"></i></span>
        <span>pencil</span>
    </li>
    <li>
        <span><i class="fa fa-map-marker"></i></span>
        <span>map-marker</span>
    </li>
    <li>
        <span><i class="fa fa-adjust"></i></span>
        <span>adjust</span>
    </li>
    <li>
        <span><i class="fa fa-tint"></i></span>
        <span>tint</span>
    </li>
    <li>
        <span><i class="fa fa-edit"></i></span>
        <span>edit</span>
    </li>
    <li>
        <span><i class="fa fa-pencil-square-o"></i></span>
        <span>pencil-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-share-square-o"></i></span>
        <span>share-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-check-square-o"></i></span>
        <span>check-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-arrows"></i></span>
        <span>arrows</span>
    </li>
    <li>
        <span><i class="fa fa-step-backward"></i></span>
        <span>step-backward</span>
    </li>
    <li>
        <span><i class="fa fa-fast-backward"></i></span>
        <span>fast-backward</span>
    </li>
    <li>
        <span><i class="fa fa-backward"></i></span>
        <span>backward</span>
    </li>
    <li>
        <span><i class="fa fa-play"></i></span>
        <span>play</span>
    </li>
    <li>
        <span><i class="fa fa-pause"></i></span>
        <span>pause</span>
    </li>
    <li>
        <span><i class="fa fa-stop"></i></span>
        <span>stop</span>
    </li>
    <li>
        <span><i class="fa fa-forward"></i></span>
        <span>forward</span>
    </li>
    <li>
        <span><i class="fa fa-fast-forward"></i></span>
        <span>fast-forward</span>
    </li>
    <li>
        <span><i class="fa fa-step-forward"></i></span>
        <span>step-forward</span>
    </li>
    <li>
        <span><i class="fa fa-eject"></i></span>
        <span>eject</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-left"></i></span>
        <span>chevron-left</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-right"></i></span>
        <span>chevron-right</span>
    </li>
    <li>
        <span><i class="fa fa-plus-circle"></i></span>
        <span>plus-circle</span>
    </li>
    <li>
        <span><i class="fa fa-minus-circle"></i></span>
        <span>minus-circle</span>
    </li>
    <li>
        <span><i class="fa fa-times-circle"></i></span>
        <span>times-circle</span>
    </li>
    <li>
        <span><i class="fa fa-check-circle"></i></span>
        <span>check-circle</span>
    </li>
    <li>
        <span><i class="fa fa-question-circle"></i></span>
        <span>question-circle</span>
    </li>
    <li>
        <span><i class="fa fa-info-circle"></i></span>
        <span>info-circle</span>
    </li>
    <li>
        <span><i class="fa fa-crosshairs"></i></span>
        <span>crosshairs</span>
    </li>
    <li>
        <span><i class="fa fa-times-circle-o"></i></span>
        <span>times-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-check-circle-o"></i></span>
        <span>check-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-ban"></i></span>
        <span>ban</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-left"></i></span>
        <span>arrow-left</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-right"></i></span>
        <span>arrow-right</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-up"></i></span>
        <span>arrow-up</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-down"></i></span>
        <span>arrow-down</span>
    </li>
    <li>
        <span><i class="fa fa-mail-forward"></i></span>
        <span>mail-forward</span>
    </li>
    <li>
        <span><i class="fa fa-share"></i></span>
        <span>share</span>
    </li>
    <li>
        <span><i class="fa fa-expand"></i></span>
        <span>expand</span>
    </li>
    <li>
        <span><i class="fa fa-compress"></i></span>
        <span>compress</span>
    </li>
    <li>
        <span><i class="fa fa-plus"></i></span>
        <span>plus</span>
    </li>
    <li>
        <span><i class="fa fa-minus"></i></span>
        <span>minus</span>
    </li>
    <li>
        <span><i class="fa fa-asterisk"></i></span>
        <span>asterisk</span>
    </li>
    <li>
        <span><i class="fa fa-exclamation-circle"></i></span>
        <span>exclamation-circle</span>
    </li>
    <li>
        <span><i class="fa fa-gift"></i></span>
        <span>gift</span>
    </li>
    <li>
        <span><i class="fa fa-leaf"></i></span>
        <span>leaf</span>
    </li>
    <li>
        <span><i class="fa fa-fire"></i></span>
        <span>fire</span>
    </li>
    <li>
        <span><i class="fa fa-eye"></i></span>
        <span>eye</span>
    </li>
    <li>
        <span><i class="fa fa-eye-slash"></i></span>
        <span>eye-slash</span>
    </li>
    <li>
        <span><i class="fa fa-warning"></i></span>
        <span>warning</span>
    </li>
    <li>
        <span><i class="fa fa-exclamation-triangle"></i></span>
        <span>exclamation-triangle</span>
    </li>
    <li>
        <span><i class="fa fa-plane"></i></span>
        <span>plane</span>
    </li>
    <li>
        <span><i class="fa fa-calendar"></i></span>
        <span>calendar</span>
    </li>
    <li>
        <span><i class="fa fa-random"></i></span>
        <span>random</span>
    </li>
    <li>
        <span><i class="fa fa-comment"></i></span>
        <span>comment</span>
    </li>
    <li>
        <span><i class="fa fa-magnet"></i></span>
        <span>magnet</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-up"></i></span>
        <span>chevron-up</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-down"></i></span>
        <span>chevron-down</span>
    </li>
    <li>
        <span><i class="fa fa-retweet"></i></span>
        <span>retweet</span>
    </li>
    <li>
        <span><i class="fa fa-shopping-cart"></i></span>
        <span>shopping-cart</span>
    </li>
    <li>
        <span><i class="fa fa-folder"></i></span>
        <span>folder</span>
    </li>
    <li>
        <span><i class="fa fa-folder-open"></i></span>
        <span>folder-open</span>
    </li>
    <li>
        <span><i class="fa fa-arrows-v"></i></span>
        <span>arrows-v</span>
    </li>
    <li>
        <span><i class="fa fa-arrows-h"></i></span>
        <span>arrows-h</span>
    </li>
    <li>
        <span><i class="fa fa-bar-chart-o"></i></span>
        <span>bar-chart-o</span>
    </li>
    <li>
        <span><i class="fa fa-bar-chart"></i></span>
        <span>bar-chart</span>
    </li>
    <li>
        <span><i class="fa fa-twitter-square"></i></span>
        <span>twitter-square</span>
    </li>
    <li>
        <span><i class="fa fa-facebook-square"></i></span>
        <span>facebook-square</span>
    </li>
    <li>
        <span><i class="fa fa-camera-retro"></i></span>
        <span>camera-retro</span>
    </li>
    <li>
        <span><i class="fa fa-key"></i></span>
        <span>key</span>
    </li>
    <li>
        <span><i class="fa fa-gears"></i></span>
        <span>gears</span>
    </li>
    <li>
        <span><i class="fa fa-cogs"></i></span>
        <span>cogs</span>
    </li>
    <li>
        <span><i class="fa fa-comments"></i></span>
        <span>comments</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-o-up"></i></span>
        <span>thumbs-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-o-down"></i></span>
        <span>thumbs-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-star-half"></i></span>
        <span>star-half</span>
    </li>
    <li>
        <span><i class="fa fa-heart-o"></i></span>
        <span>heart-o</span>
    </li>
    <li>
        <span><i class="fa fa-sign-out"></i></span>
        <span>sign-out</span>
    </li>
    <li>
        <span><i class="fa fa-linkedin-square"></i></span>
        <span>linkedin-square</span>
    </li>
    <li>
        <span><i class="fa fa-thumb-tack"></i></span>
        <span>thumb-tack</span>
    </li>
    <li>
        <span><i class="fa fa-external-link"></i></span>
        <span>external-link</span>
    </li>
    <li>
        <span><i class="fa fa-sign-in"></i></span>
        <span>sign-in</span>
    </li>
    <li>
        <span><i class="fa fa-trophy"></i></span>
        <span>trophy</span>
    </li>
    <li>
        <span><i class="fa fa-github-square"></i></span>
        <span>github-square</span>
    </li>
    <li>
        <span><i class="fa fa-upload"></i></span>
        <span>upload</span>
    </li>
    <li>
        <span><i class="fa fa-lemon-o"></i></span>
        <span>lemon-o</span>
    </li>
    <li>
        <span><i class="fa fa-phone"></i></span>
        <span>phone</span>
    </li>
    <li>
        <span><i class="fa fa-square-o"></i></span>
        <span>square-o</span>
    </li>
    <li>
        <span><i class="fa fa-bookmark-o"></i></span>
        <span>bookmark-o</span>
    </li>
    <li>
        <span><i class="fa fa-phone-square"></i></span>
        <span>phone-square</span>
    </li>
    <li>
        <span><i class="fa fa-twitter"></i></span>
        <span>twitter</span>
    </li>
    <li>
        <span><i class="fa fa-facebook-f"></i></span>
        <span>facebook-f</span>
    </li>
    <li>
        <span><i class="fa fa-facebook"></i></span>
        <span>facebook</span>
    </li>
    <li>
        <span><i class="fa fa-github"></i></span>
        <span>github</span>
    </li>
    <li>
        <span><i class="fa fa-unlock"></i></span>
        <span>unlock</span>
    </li>
    <li>
        <span><i class="fa fa-credit-card"></i></span>
        <span>credit-card</span>
    </li>
    <li>
        <span><i class="fa fa-feed"></i></span>
        <span>feed</span>
    </li>
    <li>
        <span><i class="fa fa-rss"></i></span>
        <span>rss</span>
    </li>
    <li>
        <span><i class="fa fa-hdd-o"></i></span>
        <span>hdd-o</span>
    </li>
    <li>
        <span><i class="fa fa-bullhorn"></i></span>
        <span>bullhorn</span>
    </li>
    <li>
        <span><i class="fa fa-bell"></i></span>
        <span>bell</span>
    </li>
    <li>
        <span><i class="fa fa-certificate"></i></span>
        <span>certificate</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-right"></i></span>
        <span>hand-o-right</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-left"></i></span>
        <span>hand-o-left</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-up"></i></span>
        <span>hand-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-hand-o-down"></i></span>
        <span>hand-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-left"></i></span>
        <span>arrow-circle-left</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-right"></i></span>
        <span>arrow-circle-right</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-up"></i></span>
        <span>arrow-circle-up</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-down"></i></span>
        <span>arrow-circle-down</span>
    </li>
    <li>
        <span><i class="fa fa-globe"></i></span>
        <span>globe</span>
    </li>
    <li>
        <span><i class="fa fa-wrench"></i></span>
        <span>wrench</span>
    </li>
    <li>
        <span><i class="fa fa-tasks"></i></span>
        <span>tasks</span>
    </li>
    <li>
        <span><i class="fa fa-filter"></i></span>
        <span>filter</span>
    </li>
    <li>
        <span><i class="fa fa-briefcase"></i></span>
        <span>briefcase</span>
    </li>
    <li>
        <span><i class="fa fa-arrows-alt"></i></span>
        <span>arrows-alt</span>
    </li>
    <li>
        <span><i class="fa fa-group"></i></span>
        <span>group</span>
    </li>
    <li>
        <span><i class="fa fa-users"></i></span>
        <span>users</span>
    </li>
    <li>
        <span><i class="fa fa-chain"></i></span>
        <span>chain</span>
    </li>
    <li>
        <span><i class="fa fa-link"></i></span>
        <span>link</span>
    </li>
    <li>
        <span><i class="fa fa-cloud"></i></span>
        <span>cloud</span>
    </li>
    <li>
        <span><i class="fa fa-flask"></i></span>
        <span>flask</span>
    </li>
    <li>
        <span><i class="fa fa-cut"></i></span>
        <span>cut</span>
    </li>
    <li>
        <span><i class="fa fa-scissors"></i></span>
        <span>scissors</span>
    </li>
    <li>
        <span><i class="fa fa-copy"></i></span>
        <span>copy</span>
    </li>
    <li>
        <span><i class="fa fa-files-o"></i></span>
        <span>files-o</span>
    </li>
    <li>
        <span><i class="fa fa-paperclip"></i></span>
        <span>paperclip</span>
    </li>
    <li>
        <span><i class="fa fa-save"></i></span>
        <span>save</span>
    </li>
    <li>
        <span><i class="fa fa-floppy-o"></i></span>
        <span>floppy-o</span>
    </li>
    <li>
        <span><i class="fa fa-square"></i></span>
        <span>square</span>
    </li>
    <li>
        <span><i class="fa fa-navicon"></i></span>
        <span>navicon</span>
    </li>
    <li>
        <span><i class="fa fa-reorder"></i></span>
        <span>reorder</span>
    </li>
    <li>
        <span><i class="fa fa-bars"></i></span>
        <span>bars</span>
    </li>
    <li>
        <span><i class="fa fa-list-ul"></i></span>
        <span>list-ul</span>
    </li>
    <li>
        <span><i class="fa fa-list-ol"></i></span>
        <span>list-ol</span>
    </li>
    <li>
        <span><i class="fa fa-strikethrough"></i></span>
        <span>strikethrough</span>
    </li>
    <li>
        <span><i class="fa fa-underline"></i></span>
        <span>underline</span>
    </li>
    <li>
        <span><i class="fa fa-table"></i></span>
        <span>table</span>
    </li>
    <li>
        <span><i class="fa fa-magic"></i></span>
        <span>magic</span>
    </li>
    <li>
        <span><i class="fa fa-truck"></i></span>
        <span>truck</span>
    </li>
    <li>
        <span><i class="fa fa-pinterest"></i></span>
        <span>pinterest</span>
    </li>
    <li>
        <span><i class="fa fa-pinterest-square"></i></span>
        <span>pinterest-square</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus-square"></i></span>
        <span>google-plus-square</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus"></i></span>
        <span>google-plus</span>
    </li>
    <li>
        <span><i class="fa fa-money"></i></span>
        <span>money</span>
    </li>
    <li>
        <span><i class="fa fa-caret-down"></i></span>
        <span>caret-down</span>
    </li>
    <li>
        <span><i class="fa fa-caret-up"></i></span>
        <span>caret-up</span>
    </li>
    <li>
        <span><i class="fa fa-caret-left"></i></span>
        <span>caret-left</span>
    </li>
    <li>
        <span><i class="fa fa-caret-right"></i></span>
        <span>caret-right</span>
    </li>
    <li>
        <span><i class="fa fa-columns"></i></span>
        <span>columns</span>
    </li>
    <li>
        <span><i class="fa fa-unsorted"></i></span>
        <span>unsorted</span>
    </li>
    <li>
        <span><i class="fa fa-sort"></i></span>
        <span>sort</span>
    </li>
    <li>
        <span><i class="fa fa-sort-down"></i></span>
        <span>sort-down</span>
    </li>
    <li>
        <span><i class="fa fa-sort-desc"></i></span>
        <span>sort-desc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-up"></i></span>
        <span>sort-up</span>
    </li>
    <li>
        <span><i class="fa fa-sort-asc"></i></span>
        <span>sort-asc</span>
    </li>
    <li>
        <span><i class="fa fa-envelope"></i></span>
        <span>envelope</span>
    </li>
    <li>
        <span><i class="fa fa-linkedin"></i></span>
        <span>linkedin</span>
    </li>
    <li>
        <span><i class="fa fa-rotate-left"></i></span>
        <span>rotate-left</span>
    </li>
    <li>
        <span><i class="fa fa-undo"></i></span>
        <span>undo</span>
    </li>
    <li>
        <span><i class="fa fa-legal"></i></span>
        <span>legal</span>
    </li>
    <li>
        <span><i class="fa fa-gavel"></i></span>
        <span>gavel</span>
    </li>
    <li>
        <span><i class="fa fa-dashboard"></i></span>
        <span>dashboard</span>
    </li>
    <li>
        <span><i class="fa fa-tachometer"></i></span>
        <span>tachometer</span>
    </li>
    <li>
        <span><i class="fa fa-comment-o"></i></span>
        <span>comment-o</span>
    </li>
    <li>
        <span><i class="fa fa-comments-o"></i></span>
        <span>comments-o</span>
    </li>
    <li>
        <span><i class="fa fa-flash"></i></span>
        <span>flash</span>
    </li>
    <li>
        <span><i class="fa fa-bolt"></i></span>
        <span>bolt</span>
    </li>
    <li>
        <span><i class="fa fa-sitemap"></i></span>
        <span>sitemap</span>
    </li>
    <li>
        <span><i class="fa fa-umbrella"></i></span>
        <span>umbrella</span>
    </li>
    <li>
        <span><i class="fa fa-paste"></i></span>
        <span>paste</span>
    </li>
    <li>
        <span><i class="fa fa-clipboard"></i></span>
        <span>clipboard</span>
    </li>
    <li>
        <span><i class="fa fa-lightbulb-o"></i></span>
        <span>lightbulb-o</span>
    </li>
    <li>
        <span><i class="fa fa-exchange"></i></span>
        <span>exchange</span>
    </li>
    <li>
        <span><i class="fa fa-cloud-download"></i></span>
        <span>cloud-download</span>
    </li>
    <li>
        <span><i class="fa fa-cloud-upload"></i></span>
        <span>cloud-upload</span>
    </li>
    <li>
        <span><i class="fa fa-user-md"></i></span>
        <span>user-md</span>
    </li>
    <li>
        <span><i class="fa fa-stethoscope"></i></span>
        <span>stethoscope</span>
    </li>
    <li>
        <span><i class="fa fa-suitcase"></i></span>
        <span>suitcase</span>
    </li>
    <li>
        <span><i class="fa fa-bell-o"></i></span>
        <span>bell-o</span>
    </li>
    <li>
        <span><i class="fa fa-coffee"></i></span>
        <span>coffee</span>
    </li>
    <li>
        <span><i class="fa fa-cutlery"></i></span>
        <span>cutlery</span>
    </li>
    <li>
        <span><i class="fa fa-file-text-o"></i></span>
        <span>file-text-o</span>
    </li>
    <li>
        <span><i class="fa fa-building-o"></i></span>
        <span>building-o</span>
    </li>
    <li>
        <span><i class="fa fa-hospital-o"></i></span>
        <span>hospital-o</span>
    </li>
    <li>
        <span><i class="fa fa-ambulance"></i></span>
        <span>ambulance</span>
    </li>
    <li>
        <span><i class="fa fa-medkit"></i></span>
        <span>medkit</span>
    </li>
    <li>
        <span><i class="fa fa-fighter-jet"></i></span>
        <span>fighter-jet</span>
    </li>
    <li>
        <span><i class="fa fa-beer"></i></span>
        <span>beer</span>
    </li>
    <li>
        <span><i class="fa fa-h-square"></i></span>
        <span>h-square</span>
    </li>
    <li>
        <span><i class="fa fa-plus-square"></i></span>
        <span>plus-square</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-left"></i></span>
        <span>angle-double-left</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-right"></i></span>
        <span>angle-double-right</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-up"></i></span>
        <span>angle-double-up</span>
    </li>
    <li>
        <span><i class="fa fa-angle-double-down"></i></span>
        <span>angle-double-down</span>
    </li>
    <li>
        <span><i class="fa fa-angle-left"></i></span>
        <span>angle-left</span>
    </li>
    <li>
        <span><i class="fa fa-angle-right"></i></span>
        <span>angle-right</span>
    </li>
    <li>
        <span><i class="fa fa-angle-up"></i></span>
        <span>angle-up</span>
    </li>
    <li>
        <span><i class="fa fa-angle-down"></i></span>
        <span>angle-down</span>
    </li>
    <li>
        <span><i class="fa fa-desktop"></i></span>
        <span>desktop</span>
    </li>
    <li>
        <span><i class="fa fa-laptop"></i></span>
        <span>laptop</span>
    </li>
    <li>
        <span><i class="fa fa-tablet"></i></span>
        <span>tablet</span>
    </li>
    <li>
        <span><i class="fa fa-mobile-phone"></i></span>
        <span>mobile-phone</span>
    </li>
    <li>
        <span><i class="fa fa-mobile"></i></span>
        <span>mobile</span>
    </li>
    <li>
        <span><i class="fa fa-circle-o"></i></span>
        <span>circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-quote-left"></i></span>
        <span>quote-left</span>
    </li>
    <li>
        <span><i class="fa fa-quote-right"></i></span>
        <span>quote-right</span>
    </li>
    <li>
        <span><i class="fa fa-spinner"></i></span>
        <span>spinner</span>
    </li>
    <li>
        <span><i class="fa fa-circle"></i></span>
        <span>circle</span>
    </li>
    <li>
        <span><i class="fa fa-mail-reply"></i></span>
        <span>mail-reply</span>
    </li>
    <li>
        <span><i class="fa fa-reply"></i></span>
        <span>reply</span>
    </li>
    <li>
        <span><i class="fa fa-github-alt"></i></span>
        <span>github-alt</span>
    </li>
    <li>
        <span><i class="fa fa-folder-o"></i></span>
        <span>folder-o</span>
    </li>
    <li>
        <span><i class="fa fa-folder-open-o"></i></span>
        <span>folder-open-o</span>
    </li>
    <li>
        <span><i class="fa fa-smile-o"></i></span>
        <span>smile-o</span>
    </li>
    <li>
        <span><i class="fa fa-frown-o"></i></span>
        <span>frown-o</span>
    </li>
    <li>
        <span><i class="fa fa-meh-o"></i></span>
        <span>meh-o</span>
    </li>
    <li>
        <span><i class="fa fa-gamepad"></i></span>
        <span>gamepad</span>
    </li>
    <li>
        <span><i class="fa fa-keyboard-o"></i></span>
        <span>keyboard-o</span>
    </li>
    <li>
        <span><i class="fa fa-flag-o"></i></span>
        <span>flag-o</span>
    </li>
    <li>
        <span><i class="fa fa-flag-checkered"></i></span>
        <span>flag-checkered</span>
    </li>
    <li>
        <span><i class="fa fa-terminal"></i></span>
        <span>terminal</span>
    </li>
    <li>
        <span><i class="fa fa-code"></i></span>
        <span>code</span>
    </li>
    <li>
        <span><i class="fa fa-mail-reply-all"></i></span>
        <span>mail-reply-all</span>
    </li>
    <li>
        <span><i class="fa fa-reply-all"></i></span>
        <span>reply-all</span>
    </li>
    <li>
        <span><i class="fa fa-star-half-empty"></i></span>
        <span>star-half-empty</span>
    </li>
    <li>
        <span><i class="fa fa-star-half-full"></i></span>
        <span>star-half-full</span>
    </li>
    <li>
        <span><i class="fa fa-star-half-o"></i></span>
        <span>star-half-o</span>
    </li>
    <li>
        <span><i class="fa fa-location-arrow"></i></span>
        <span>location-arrow</span>
    </li>
    <li>
        <span><i class="fa fa-crop"></i></span>
        <span>crop</span>
    </li>
    <li>
        <span><i class="fa fa-code-fork"></i></span>
        <span>code-fork</span>
    </li>
    <li>
        <span><i class="fa fa-unlink"></i></span>
        <span>unlink</span>
    </li>
    <li>
        <span><i class="fa fa-chain-broken"></i></span>
        <span>chain-broken</span>
    </li>
    <li>
        <span><i class="fa fa-question"></i></span>
        <span>question</span>
    </li>
    <li>
        <span><i class="fa fa-info"></i></span>
        <span>info</span>
    </li>
    <li>
        <span><i class="fa fa-exclamation"></i></span>
        <span>exclamation</span>
    </li>
    <li>
        <span><i class="fa fa-superscript"></i></span>
        <span>superscript</span>
    </li>
    <li>
        <span><i class="fa fa-subscript"></i></span>
        <span>subscript</span>
    </li>
    <li>
        <span><i class="fa fa-eraser"></i></span>
        <span>eraser</span>
    </li>
    <li>
        <span><i class="fa fa-puzzle-piece"></i></span>
        <span>puzzle-piece</span>
    </li>
    <li>
        <span><i class="fa fa-microphone"></i></span>
        <span>microphone</span>
    </li>
    <li>
        <span><i class="fa fa-microphone-slash"></i></span>
        <span>microphone-slash</span>
    </li>
    <li>
        <span><i class="fa fa-shield"></i></span>
        <span>shield</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-o"></i></span>
        <span>calendar-o</span>
    </li>
    <li>
        <span><i class="fa fa-fire-extinguisher"></i></span>
        <span>fire-extinguisher</span>
    </li>
    <li>
        <span><i class="fa fa-rocket"></i></span>
        <span>rocket</span>
    </li>
    <li>
        <span><i class="fa fa-maxcdn"></i></span>
        <span>maxcdn</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-left"></i></span>
        <span>chevron-circle-left</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-right"></i></span>
        <span>chevron-circle-right</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-up"></i></span>
        <span>chevron-circle-up</span>
    </li>
    <li>
        <span><i class="fa fa-chevron-circle-down"></i></span>
        <span>chevron-circle-down</span>
    </li>
    <li>
        <span><i class="fa fa-html5"></i></span>
        <span>html5</span>
    </li>
    <li>
        <span><i class="fa fa-css3"></i></span>
        <span>css3</span>
    </li>
    <li>
        <span><i class="fa fa-anchor"></i></span>
        <span>anchor</span>
    </li>
    <li>
        <span><i class="fa fa-unlock-alt"></i></span>
        <span>unlock-alt</span>
    </li>
    <li>
        <span><i class="fa fa-bullseye"></i></span>
        <span>bullseye</span>
    </li>
    <li>
        <span><i class="fa fa-ellipsis-h"></i></span>
        <span>ellipsis-h</span>
    </li>
    <li>
        <span><i class="fa fa-ellipsis-v"></i></span>
        <span>ellipsis-v</span>
    </li>
    <li>
        <span><i class="fa fa-rss-square"></i></span>
        <span>rss-square</span>
    </li>
    <li>
        <span><i class="fa fa-play-circle"></i></span>
        <span>play-circle</span>
    </li>
    <li>
        <span><i class="fa fa-ticket"></i></span>
        <span>ticket</span>
    </li>
    <li>
        <span><i class="fa fa-minus-square"></i></span>
        <span>minus-square</span>
    </li>
    <li>
        <span><i class="fa fa-minus-square-o"></i></span>
        <span>minus-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-level-up"></i></span>
        <span>level-up</span>
    </li>
    <li>
        <span><i class="fa fa-level-down"></i></span>
        <span>level-down</span>
    </li>
    <li>
        <span><i class="fa fa-check-square"></i></span>
        <span>check-square</span>
    </li>
    <li>
        <span><i class="fa fa-pencil-square"></i></span>
        <span>pencil-square</span>
    </li>
    <li>
        <span><i class="fa fa-external-link-square"></i></span>
        <span>external-link-square</span>
    </li>
    <li>
        <span><i class="fa fa-share-square"></i></span>
        <span>share-square</span>
    </li>
    <li>
        <span><i class="fa fa-compass"></i></span>
        <span>compass</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-down"></i></span>
        <span>toggle-down</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-down"></i></span>
        <span>caret-square-o-down</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-up"></i></span>
        <span>toggle-up</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-up"></i></span>
        <span>caret-square-o-up</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-right"></i></span>
        <span>toggle-right</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-right"></i></span>
        <span>caret-square-o-right</span>
    </li>
    <li>
        <span><i class="fa fa-euro"></i></span>
        <span>euro</span>
    </li>
    <li>
        <span><i class="fa fa-eur"></i></span>
        <span>eur</span>
    </li>
    <li>
        <span><i class="fa fa-gbp"></i></span>
        <span>gbp</span>
    </li>
    <li>
        <span><i class="fa fa-dollar"></i></span>
        <span>dollar</span>
    </li>
    <li>
        <span><i class="fa fa-usd"></i></span>
        <span>usd</span>
    </li>
    <li>
        <span><i class="fa fa-rupee"></i></span>
        <span>rupee</span>
    </li>
    <li>
        <span><i class="fa fa-inr"></i></span>
        <span>inr</span>
    </li>
    <li>
        <span><i class="fa fa-cny"></i></span>
        <span>cny</span>
    </li>
    <li>
        <span><i class="fa fa-rmb"></i></span>
        <span>rmb</span>
    </li>
    <li>
        <span><i class="fa fa-yen"></i></span>
        <span>yen</span>
    </li>
    <li>
        <span><i class="fa fa-jpy"></i></span>
        <span>jpy</span>
    </li>
    <li>
        <span><i class="fa fa-ruble"></i></span>
        <span>ruble</span>
    </li>
    <li>
        <span><i class="fa fa-rouble"></i></span>
        <span>rouble</span>
    </li>
    <li>
        <span><i class="fa fa-rub"></i></span>
        <span>rub</span>
    </li>
    <li>
        <span><i class="fa fa-won"></i></span>
        <span>won</span>
    </li>
    <li>
        <span><i class="fa fa-krw"></i></span>
        <span>krw</span>
    </li>
    <li>
        <span><i class="fa fa-bitcoin"></i></span>
        <span>bitcoin</span>
    </li>
    <li>
        <span><i class="fa fa-btc"></i></span>
        <span>btc</span>
    </li>
    <li>
        <span><i class="fa fa-file"></i></span>
        <span>file</span>
    </li>
    <li>
        <span><i class="fa fa-file-text"></i></span>
        <span>file-text</span>
    </li>
    <li>
        <span><i class="fa fa-sort-alpha-asc"></i></span>
        <span>sort-alpha-asc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-alpha-desc"></i></span>
        <span>sort-alpha-desc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-amount-asc"></i></span>
        <span>sort-amount-asc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-amount-desc"></i></span>
        <span>sort-amount-desc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-numeric-asc"></i></span>
        <span>sort-numeric-asc</span>
    </li>
    <li>
        <span><i class="fa fa-sort-numeric-desc"></i></span>
        <span>sort-numeric-desc</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-up"></i></span>
        <span>thumbs-up</span>
    </li>
    <li>
        <span><i class="fa fa-thumbs-down"></i></span>
        <span>thumbs-down</span>
    </li>
    <li>
        <span><i class="fa fa-youtube-square"></i></span>
        <span>youtube-square</span>
    </li>
    <li>
        <span><i class="fa fa-youtube"></i></span>
        <span>youtube</span>
    </li>
    <li>
        <span><i class="fa fa-xing"></i></span>
        <span>xing</span>
    </li>
    <li>
        <span><i class="fa fa-xing-square"></i></span>
        <span>xing-square</span>
    </li>
    <li>
        <span><i class="fa fa-youtube-play"></i></span>
        <span>youtube-play</span>
    </li>
    <li>
        <span><i class="fa fa-dropbox"></i></span>
        <span>dropbox</span>
    </li>
    <li>
        <span><i class="fa fa-stack-overflow"></i></span>
        <span>stack-overflow</span>
    </li>
    <li>
        <span><i class="fa fa-instagram"></i></span>
        <span>instagram</span>
    </li>
    <li>
        <span><i class="fa fa-flickr"></i></span>
        <span>flickr</span>
    </li>
    <li>
        <span><i class="fa fa-adn"></i></span>
        <span>adn</span>
    </li>
    <li>
        <span><i class="fa fa-bitbucket"></i></span>
        <span>bitbucket</span>
    </li>
    <li>
        <span><i class="fa fa-bitbucket-square"></i></span>
        <span>bitbucket-square</span>
    </li>
    <li>
        <span><i class="fa fa-tumblr"></i></span>
        <span>tumblr</span>
    </li>
    <li>
        <span><i class="fa fa-tumblr-square"></i></span>
        <span>tumblr-square</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-down"></i></span>
        <span>long-arrow-down</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-up"></i></span>
        <span>long-arrow-up</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-left"></i></span>
        <span>long-arrow-left</span>
    </li>
    <li>
        <span><i class="fa fa-long-arrow-right"></i></span>
        <span>long-arrow-right</span>
    </li>
    <li>
        <span><i class="fa fa-apple"></i></span>
        <span>apple</span>
    </li>
    <li>
        <span><i class="fa fa-windows"></i></span>
        <span>windows</span>
    </li>
    <li>
        <span><i class="fa fa-android"></i></span>
        <span>android</span>
    </li>
    <li>
        <span><i class="fa fa-linux"></i></span>
        <span>linux</span>
    </li>
    <li>
        <span><i class="fa fa-dribbble"></i></span>
        <span>dribbble</span>
    </li>
    <li>
        <span><i class="fa fa-skype"></i></span>
        <span>skype</span>
    </li>
    <li>
        <span><i class="fa fa-foursquare"></i></span>
        <span>foursquare</span>
    </li>
    <li>
        <span><i class="fa fa-trello"></i></span>
        <span>trello</span>
    </li>
    <li>
        <span><i class="fa fa-female"></i></span>
        <span>female</span>
    </li>
    <li>
        <span><i class="fa fa-male"></i></span>
        <span>male</span>
    </li>
    <li>
        <span><i class="fa fa-gittip"></i></span>
        <span>gittip</span>
    </li>
    <li>
        <span><i class="fa fa-gratipay"></i></span>
        <span>gratipay</span>
    </li>
    <li>
        <span><i class="fa fa-sun-o"></i></span>
        <span>sun-o</span>
    </li>
    <li>
        <span><i class="fa fa-moon-o"></i></span>
        <span>moon-o</span>
    </li>
    <li>
        <span><i class="fa fa-archive"></i></span>
        <span>archive</span>
    </li>
    <li>
        <span><i class="fa fa-bug"></i></span>
        <span>bug</span>
    </li>
    <li>
        <span><i class="fa fa-vk"></i></span>
        <span>vk</span>
    </li>
    <li>
        <span><i class="fa fa-weibo"></i></span>
        <span>weibo</span>
    </li>
    <li>
        <span><i class="fa fa-renren"></i></span>
        <span>renren</span>
    </li>
    <li>
        <span><i class="fa fa-pagelines"></i></span>
        <span>pagelines</span>
    </li>
    <li>
        <span><i class="fa fa-stack-exchange"></i></span>
        <span>stack-exchange</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-right"></i></span>
        <span>arrow-circle-o-right</span>
    </li>
    <li>
        <span><i class="fa fa-arrow-circle-o-left"></i></span>
        <span>arrow-circle-o-left</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-left"></i></span>
        <span>toggle-left</span>
    </li>
    <li>
        <span><i class="fa fa-caret-square-o-left"></i></span>
        <span>caret-square-o-left</span>
    </li>
    <li>
        <span><i class="fa fa-dot-circle-o"></i></span>
        <span>dot-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-wheelchair"></i></span>
        <span>wheelchair</span>
    </li>
    <li>
        <span><i class="fa fa-vimeo-square"></i></span>
        <span>vimeo-square</span>
    </li>
    <li>
        <span><i class="fa fa-turkish-lira"></i></span>
        <span>turkish-lira</span>
    </li>
    <li>
        <span><i class="fa fa-try"></i></span>
        <span>try</span>
    </li>
    <li>
        <span><i class="fa fa-plus-square-o"></i></span>
        <span>plus-square-o</span>
    </li>
    <li>
        <span><i class="fa fa-space-shuttle"></i></span>
        <span>space-shuttle</span>
    </li>
    <li>
        <span><i class="fa fa-slack"></i></span>
        <span>slack</span>
    </li>
    <li>
        <span><i class="fa fa-envelope-square"></i></span>
        <span>envelope-square</span>
    </li>
    <li>
        <span><i class="fa fa-wordpress"></i></span>
        <span>wordpress</span>
    </li>
    <li>
        <span><i class="fa fa-openid"></i></span>
        <span>openid</span>
    </li>
    <li>
        <span><i class="fa fa-institution"></i></span>
        <span>institution</span>
    </li>
    <li>
        <span><i class="fa fa-bank"></i></span>
        <span>bank</span>
    </li>
    <li>
        <span><i class="fa fa-university"></i></span>
        <span>university</span>
    </li>
    <li>
        <span><i class="fa fa-mortar-board"></i></span>
        <span>mortar-board</span>
    </li>
    <li>
        <span><i class="fa fa-graduation-cap"></i></span>
        <span>graduation-cap</span>
    </li>
    <li>
        <span><i class="fa fa-yahoo"></i></span>
        <span>yahoo</span>
    </li>
    <li>
        <span><i class="fa fa-google"></i></span>
        <span>google</span>
    </li>
    <li>
        <span><i class="fa fa-reddit"></i></span>
        <span>reddit</span>
    </li>
    <li>
        <span><i class="fa fa-reddit-square"></i></span>
        <span>reddit-square</span>
    </li>
    <li>
        <span><i class="fa fa-stumbleupon-circle"></i></span>
        <span>stumbleupon-circle</span>
    </li>
    <li>
        <span><i class="fa fa-stumbleupon"></i></span>
        <span>stumbleupon</span>
    </li>
    <li>
        <span><i class="fa fa-delicious"></i></span>
        <span>delicious</span>
    </li>
    <li>
        <span><i class="fa fa-digg"></i></span>
        <span>digg</span>
    </li>
    <li>
        <span><i class="fa fa-pied-piper-pp"></i></span>
        <span>pied-piper-pp</span>
    </li>
    <li>
        <span><i class="fa fa-pied-piper-alt"></i></span>
        <span>pied-piper-alt</span>
    </li>
    <li>
        <span><i class="fa fa-drupal"></i></span>
        <span>drupal</span>
    </li>
    <li>
        <span><i class="fa fa-joomla"></i></span>
        <span>joomla</span>
    </li>
    <li>
        <span><i class="fa fa-language"></i></span>
        <span>language</span>
    </li>
    <li>
        <span><i class="fa fa-fax"></i></span>
        <span>fax</span>
    </li>
    <li>
        <span><i class="fa fa-building"></i></span>
        <span>building</span>
    </li>
    <li>
        <span><i class="fa fa-child"></i></span>
        <span>child</span>
    </li>
    <li>
        <span><i class="fa fa-paw"></i></span>
        <span>paw</span>
    </li>
    <li>
        <span><i class="fa fa-spoon"></i></span>
        <span>spoon</span>
    </li>
    <li>
        <span><i class="fa fa-cube"></i></span>
        <span>cube</span>
    </li>
    <li>
        <span><i class="fa fa-cubes"></i></span>
        <span>cubes</span>
    </li>
    <li>
        <span><i class="fa fa-behance"></i></span>
        <span>behance</span>
    </li>
    <li>
        <span><i class="fa fa-behance-square"></i></span>
        <span>behance-square</span>
    </li>
    <li>
        <span><i class="fa fa-steam"></i></span>
        <span>steam</span>
    </li>
    <li>
        <span><i class="fa fa-steam-square"></i></span>
        <span>steam-square</span>
    </li>
    <li>
        <span><i class="fa fa-recycle"></i></span>
        <span>recycle</span>
    </li>
    <li>
        <span><i class="fa fa-automobile"></i></span>
        <span>automobile</span>
    </li>
    <li>
        <span><i class="fa fa-car"></i></span>
        <span>car</span>
    </li>
    <li>
        <span><i class="fa fa-cab"></i></span>
        <span>cab</span>
    </li>
    <li>
        <span><i class="fa fa-taxi"></i></span>
        <span>taxi</span>
    </li>
    <li>
        <span><i class="fa fa-tree"></i></span>
        <span>tree</span>
    </li>
    <li>
        <span><i class="fa fa-spotify"></i></span>
        <span>spotify</span>
    </li>
    <li>
        <span><i class="fa fa-deviantart"></i></span>
        <span>deviantart</span>
    </li>
    <li>
        <span><i class="fa fa-soundcloud"></i></span>
        <span>soundcloud</span>
    </li>
    <li>
        <span><i class="fa fa-database"></i></span>
        <span>database</span>
    </li>
    <li>
        <span><i class="fa fa-file-pdf-o"></i></span>
        <span>file-pdf-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-word-o"></i></span>
        <span>file-word-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-excel-o"></i></span>
        <span>file-excel-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-powerpoint-o"></i></span>
        <span>file-powerpoint-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-photo-o"></i></span>
        <span>file-photo-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-picture-o"></i></span>
        <span>file-picture-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-image-o"></i></span>
        <span>file-image-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-zip-o"></i></span>
        <span>file-zip-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-archive-o"></i></span>
        <span>file-archive-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-sound-o"></i></span>
        <span>file-sound-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-audio-o"></i></span>
        <span>file-audio-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-movie-o"></i></span>
        <span>file-movie-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-video-o"></i></span>
        <span>file-video-o</span>
    </li>
    <li>
        <span><i class="fa fa-file-code-o"></i></span>
        <span>file-code-o</span>
    </li>
    <li>
        <span><i class="fa fa-vine"></i></span>
        <span>vine</span>
    </li>
    <li>
        <span><i class="fa fa-codepen"></i></span>
        <span>codepen</span>
    </li>
    <li>
        <span><i class="fa fa-jsfiddle"></i></span>
        <span>jsfiddle</span>
    </li>
    <li>
        <span><i class="fa fa-life-bouy"></i></span>
        <span>life-bouy</span>
    </li>
    <li>
        <span><i class="fa fa-life-buoy"></i></span>
        <span>life-buoy</span>
    </li>
    <li>
        <span><i class="fa fa-life-saver"></i></span>
        <span>life-saver</span>
    </li>
    <li>
        <span><i class="fa fa-support"></i></span>
        <span>support</span>
    </li>
    <li>
        <span><i class="fa fa-life-ring"></i></span>
        <span>life-ring</span>
    </li>
    <li>
        <span><i class="fa fa-circle-o-notch"></i></span>
        <span>circle-o-notch</span>
    </li>
    <li>
        <span><i class="fa fa-ra"></i></span>
        <span>ra</span>
    </li>
    <li>
        <span><i class="fa fa-resistance"></i></span>
        <span>resistance</span>
    </li>
    <li>
        <span><i class="fa fa-rebel"></i></span>
        <span>rebel</span>
    </li>
    <li>
        <span><i class="fa fa-ge"></i></span>
        <span>ge</span>
    </li>
    <li>
        <span><i class="fa fa-empire"></i></span>
        <span>empire</span>
    </li>
    <li>
        <span><i class="fa fa-git-square"></i></span>
        <span>git-square</span>
    </li>
    <li>
        <span><i class="fa fa-git"></i></span>
        <span>git</span>
    </li>
    <li>
        <span><i class="fa fa-y-combinator-square"></i></span>
        <span>y-combinator-square</span>
    </li>
    <li>
        <span><i class="fa fa-yc-square"></i></span>
        <span>yc-square</span>
    </li>
    <li>
        <span><i class="fa fa-hacker-news"></i></span>
        <span>hacker-news</span>
    </li>
    <li>
        <span><i class="fa fa-tencent-weibo"></i></span>
        <span>tencent-weibo</span>
    </li>
    <li>
        <span><i class="fa fa-qq"></i></span>
        <span>qq</span>
    </li>
    <li>
        <span><i class="fa fa-wechat"></i></span>
        <span>wechat</span>
    </li>
    <li>
        <span><i class="fa fa-weixin"></i></span>
        <span>weixin</span>
    </li>
    <li>
        <span><i class="fa fa-send"></i></span>
        <span>send</span>
    </li>
    <li>
        <span><i class="fa fa-paper-plane"></i></span>
        <span>paper-plane</span>
    </li>
    <li>
        <span><i class="fa fa-send-o"></i></span>
        <span>send-o</span>
    </li>
    <li>
        <span><i class="fa fa-paper-plane-o"></i></span>
        <span>paper-plane-o</span>
    </li>
    <li>
        <span><i class="fa fa-history"></i></span>
        <span>history</span>
    </li>
    <li>
        <span><i class="fa fa-circle-thin"></i></span>
        <span>circle-thin</span>
    </li>
    <li>
        <span><i class="fa fa-header"></i></span>
        <span>header</span>
    </li>
    <li>
        <span><i class="fa fa-paragraph"></i></span>
        <span>paragraph</span>
    </li>
    <li>
        <span><i class="fa fa-sliders"></i></span>
        <span>sliders</span>
    </li>
    <li>
        <span><i class="fa fa-share-alt"></i></span>
        <span>share-alt</span>
    </li>
    <li>
        <span><i class="fa fa-share-alt-square"></i></span>
        <span>share-alt-square</span>
    </li>
    <li>
        <span><i class="fa fa-bomb"></i></span>
        <span>bomb</span>
    </li>
    <li>
        <span><i class="fa fa-soccer-ball-o"></i></span>
        <span>soccer-ball-o</span>
    </li>
    <li>
        <span><i class="fa fa-futbol-o"></i></span>
        <span>futbol-o</span>
    </li>
    <li>
        <span><i class="fa fa-tty"></i></span>
        <span>tty</span>
    </li>
    <li>
        <span><i class="fa fa-binoculars"></i></span>
        <span>binoculars</span>
    </li>
    <li>
        <span><i class="fa fa-plug"></i></span>
        <span>plug</span>
    </li>
    <li>
        <span><i class="fa fa-slideshare"></i></span>
        <span>slideshare</span>
    </li>
    <li>
        <span><i class="fa fa-twitch"></i></span>
        <span>twitch</span>
    </li>
    <li>
        <span><i class="fa fa-yelp"></i></span>
        <span>yelp</span>
    </li>
    <li>
        <span><i class="fa fa-newspaper-o"></i></span>
        <span>newspaper-o</span>
    </li>
    <li>
        <span><i class="fa fa-wifi"></i></span>
        <span>wifi</span>
    </li>
    <li>
        <span><i class="fa fa-calculator"></i></span>
        <span>calculator</span>
    </li>
    <li>
        <span><i class="fa fa-paypal"></i></span>
        <span>paypal</span>
    </li>
    <li>
        <span><i class="fa fa-google-wallet"></i></span>
        <span>google-wallet</span>
    </li>
    <li>
        <span><i class="fa fa-cc-visa"></i></span>
        <span>cc-visa</span>
    </li>
    <li>
        <span><i class="fa fa-cc-mastercard"></i></span>
        <span>cc-mastercard</span>
    </li>
    <li>
        <span><i class="fa fa-cc-discover"></i></span>
        <span>cc-discover</span>
    </li>
    <li>
        <span><i class="fa fa-cc-amex"></i></span>
        <span>cc-amex</span>
    </li>
    <li>
        <span><i class="fa fa-cc-paypal"></i></span>
        <span>cc-paypal</span>
    </li>
    <li>
        <span><i class="fa fa-cc-stripe"></i></span>
        <span>cc-stripe</span>
    </li>
    <li>
        <span><i class="fa fa-bell-slash"></i></span>
        <span>bell-slash</span>
    </li>
    <li>
        <span><i class="fa fa-bell-slash-o"></i></span>
        <span>bell-slash-o</span>
    </li>
    <li>
        <span><i class="fa fa-trash"></i></span>
        <span>trash</span>
    </li>
    <li>
        <span><i class="fa fa-copyright"></i></span>
        <span>copyright</span>
    </li>
    <li>
        <span><i class="fa fa-at"></i></span>
        <span>at</span>
    </li>
    <li>
        <span><i class="fa fa-eyedropper"></i></span>
        <span>eyedropper</span>
    </li>
    <li>
        <span><i class="fa fa-paint-brush"></i></span>
        <span>paint-brush</span>
    </li>
    <li>
        <span><i class="fa fa-birthday-cake"></i></span>
        <span>birthday-cake</span>
    </li>
    <li>
        <span><i class="fa fa-area-chart"></i></span>
        <span>area-chart</span>
    </li>
    <li>
        <span><i class="fa fa-pie-chart"></i></span>
        <span>pie-chart</span>
    </li>
    <li>
        <span><i class="fa fa-line-chart"></i></span>
        <span>line-chart</span>
    </li>
    <li>
        <span><i class="fa fa-lastfm"></i></span>
        <span>lastfm</span>
    </li>
    <li>
        <span><i class="fa fa-lastfm-square"></i></span>
        <span>lastfm-square</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-off"></i></span>
        <span>toggle-off</span>
    </li>
    <li>
        <span><i class="fa fa-toggle-on"></i></span>
        <span>toggle-on</span>
    </li>
    <li>
        <span><i class="fa fa-bicycle"></i></span>
        <span>bicycle</span>
    </li>
    <li>
        <span><i class="fa fa-bus"></i></span>
        <span>bus</span>
    </li>
    <li>
        <span><i class="fa fa-ioxhost"></i></span>
        <span>ioxhost</span>
    </li>
    <li>
        <span><i class="fa fa-angellist"></i></span>
        <span>angellist</span>
    </li>
    <li>
        <span><i class="fa fa-cc"></i></span>
        <span>cc</span>
    </li>
    <li>
        <span><i class="fa fa-shekel"></i></span>
        <span>shekel</span>
    </li>
    <li>
        <span><i class="fa fa-sheqel"></i></span>
        <span>sheqel</span>
    </li>
    <li>
        <span><i class="fa fa-ils"></i></span>
        <span>ils</span>
    </li>
    <li>
        <span><i class="fa fa-meanpath"></i></span>
        <span>meanpath</span>
    </li>
    <li>
        <span><i class="fa fa-buysellads"></i></span>
        <span>buysellads</span>
    </li>
    <li>
        <span><i class="fa fa-connectdevelop"></i></span>
        <span>connectdevelop</span>
    </li>
    <li>
        <span><i class="fa fa-dashcube"></i></span>
        <span>dashcube</span>
    </li>
    <li>
        <span><i class="fa fa-forumbee"></i></span>
        <span>forumbee</span>
    </li>
    <li>
        <span><i class="fa fa-leanpub"></i></span>
        <span>leanpub</span>
    </li>
    <li>
        <span><i class="fa fa-sellsy"></i></span>
        <span>sellsy</span>
    </li>
    <li>
        <span><i class="fa fa-shirtsinbulk"></i></span>
        <span>shirtsinbulk</span>
    </li>
    <li>
        <span><i class="fa fa-simplybuilt"></i></span>
        <span>simplybuilt</span>
    </li>
    <li>
        <span><i class="fa fa-skyatlas"></i></span>
        <span>skyatlas</span>
    </li>
    <li>
        <span><i class="fa fa-cart-plus"></i></span>
        <span>cart-plus</span>
    </li>
    <li>
        <span><i class="fa fa-cart-arrow-down"></i></span>
        <span>cart-arrow-down</span>
    </li>
    <li>
        <span><i class="fa fa-diamond"></i></span>
        <span>diamond</span>
    </li>
    <li>
        <span><i class="fa fa-ship"></i></span>
        <span>ship</span>
    </li>
    <li>
        <span><i class="fa fa-user-secret"></i></span>
        <span>user-secret</span>
    </li>
    <li>
        <span><i class="fa fa-motorcycle"></i></span>
        <span>motorcycle</span>
    </li>
    <li>
        <span><i class="fa fa-street-view"></i></span>
        <span>street-view</span>
    </li>
    <li>
        <span><i class="fa fa-heartbeat"></i></span>
        <span>heartbeat</span>
    </li>
    <li>
        <span><i class="fa fa-venus"></i></span>
        <span>venus</span>
    </li>
    <li>
        <span><i class="fa fa-mars"></i></span>
        <span>mars</span>
    </li>
    <li>
        <span><i class="fa fa-mercury"></i></span>
        <span>mercury</span>
    </li>
    <li>
        <span><i class="fa fa-intersex"></i></span>
        <span>intersex</span>
    </li>
    <li>
        <span><i class="fa fa-transgender"></i></span>
        <span>transgender</span>
    </li>
    <li>
        <span><i class="fa fa-transgender-alt"></i></span>
        <span>transgender-alt</span>
    </li>
    <li>
        <span><i class="fa fa-venus-double"></i></span>
        <span>venus-double</span>
    </li>
    <li>
        <span><i class="fa fa-mars-double"></i></span>
        <span>mars-double</span>
    </li>
    <li>
        <span><i class="fa fa-venus-mars"></i></span>
        <span>venus-mars</span>
    </li>
    <li>
        <span><i class="fa fa-mars-stroke"></i></span>
        <span>mars-stroke</span>
    </li>
    <li>
        <span><i class="fa fa-mars-stroke-v"></i></span>
        <span>mars-stroke-v</span>
    </li>
    <li>
        <span><i class="fa fa-mars-stroke-h"></i></span>
        <span>mars-stroke-h</span>
    </li>
    <li>
        <span><i class="fa fa-neuter"></i></span>
        <span>neuter</span>
    </li>
    <li>
        <span><i class="fa fa-genderless"></i></span>
        <span>genderless</span>
    </li>
    <li>
        <span><i class="fa fa-facebook-official"></i></span>
        <span>facebook-official</span>
    </li>
    <li>
        <span><i class="fa fa-pinterest-p"></i></span>
        <span>pinterest-p</span>
    </li>
    <li>
        <span><i class="fa fa-whatsapp"></i></span>
        <span>whatsapp</span>
    </li>
    <li>
        <span><i class="fa fa-server"></i></span>
        <span>server</span>
    </li>
    <li>
        <span><i class="fa fa-user-plus"></i></span>
        <span>user-plus</span>
    </li>
    <li>
        <span><i class="fa fa-user-times"></i></span>
        <span>user-times</span>
    </li>
    <li>
        <span><i class="fa fa-hotel"></i></span>
        <span>hotel</span>
    </li>
    <li>
        <span><i class="fa fa-bed"></i></span>
        <span>bed</span>
    </li>
    <li>
        <span><i class="fa fa-viacoin"></i></span>
        <span>viacoin</span>
    </li>
    <li>
        <span><i class="fa fa-train"></i></span>
        <span>train</span>
    </li>
    <li>
        <span><i class="fa fa-subway"></i></span>
        <span>subway</span>
    </li>
    <li>
        <span><i class="fa fa-medium"></i></span>
        <span>medium</span>
    </li>
    <li>
        <span><i class="fa fa-yc"></i></span>
        <span>yc</span>
    </li>
    <li>
        <span><i class="fa fa-y-combinator"></i></span>
        <span>y-combinator</span>
    </li>
    <li>
        <span><i class="fa fa-optin-monster"></i></span>
        <span>optin-monster</span>
    </li>
    <li>
        <span><i class="fa fa-opencart"></i></span>
        <span>opencart</span>
    </li>
    <li>
        <span><i class="fa fa-expeditedssl"></i></span>
        <span>expeditedssl</span>
    </li>
    <li>
        <span><i class="fa fa-battery-4"></i></span>
        <span>battery-4</span>
    </li>
    <li>
        <span><i class="fa fa-battery-full"></i></span>
        <span>battery-full</span>
    </li>
    <li>
        <span><i class="fa fa-battery-3"></i></span>
        <span>battery-3</span>
    </li>
    <li>
        <span><i class="fa fa-battery-three-quarters"></i></span>
        <span>battery-three-quarters</span>
    </li>
    <li>
        <span><i class="fa fa-battery-2"></i></span>
        <span>battery-2</span>
    </li>
    <li>
        <span><i class="fa fa-battery-half"></i></span>
        <span>battery-half</span>
    </li>
    <li>
        <span><i class="fa fa-battery-1"></i></span>
        <span>battery-1</span>
    </li>
    <li>
        <span><i class="fa fa-battery-quarter"></i></span>
        <span>battery-quarter</span>
    </li>
    <li>
        <span><i class="fa fa-battery-0"></i></span>
        <span>battery-0</span>
    </li>
    <li>
        <span><i class="fa fa-battery-empty"></i></span>
        <span>battery-empty</span>
    </li>
    <li>
        <span><i class="fa fa-mouse-pointer"></i></span>
        <span>mouse-pointer</span>
    </li>
    <li>
        <span><i class="fa fa-i-cursor"></i></span>
        <span>i-cursor</span>
    </li>
    <li>
        <span><i class="fa fa-object-group"></i></span>
        <span>object-group</span>
    </li>
    <li>
        <span><i class="fa fa-object-ungroup"></i></span>
        <span>object-ungroup</span>
    </li>
    <li>
        <span><i class="fa fa-sticky-note"></i></span>
        <span>sticky-note</span>
    </li>
    <li>
        <span><i class="fa fa-sticky-note-o"></i></span>
        <span>sticky-note-o</span>
    </li>
    <li>
        <span><i class="fa fa-cc-jcb"></i></span>
        <span>cc-jcb</span>
    </li>
    <li>
        <span><i class="fa fa-cc-diners-club"></i></span>
        <span>cc-diners-club</span>
    </li>
    <li>
        <span><i class="fa fa-clone"></i></span>
        <span>clone</span>
    </li>
    <li>
        <span><i class="fa fa-balance-scale"></i></span>
        <span>balance-scale</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-o"></i></span>
        <span>hourglass-o</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-1"></i></span>
        <span>hourglass-1</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-start"></i></span>
        <span>hourglass-start</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-2"></i></span>
        <span>hourglass-2</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-half"></i></span>
        <span>hourglass-half</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-3"></i></span>
        <span>hourglass-3</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass-end"></i></span>
        <span>hourglass-end</span>
    </li>
    <li>
        <span><i class="fa fa-hourglass"></i></span>
        <span>hourglass</span>
    </li>
    <li>
        <span><i class="fa fa-hand-grab-o"></i></span>
        <span>hand-grab-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-rock-o"></i></span>
        <span>hand-rock-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-stop-o"></i></span>
        <span>hand-stop-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-paper-o"></i></span>
        <span>hand-paper-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-scissors-o"></i></span>
        <span>hand-scissors-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-lizard-o"></i></span>
        <span>hand-lizard-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-spock-o"></i></span>
        <span>hand-spock-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-pointer-o"></i></span>
        <span>hand-pointer-o</span>
    </li>
    <li>
        <span><i class="fa fa-hand-peace-o"></i></span>
        <span>hand-peace-o</span>
    </li>
    <li>
        <span><i class="fa fa-trademark"></i></span>
        <span>trademark</span>
    </li>
    <li>
        <span><i class="fa fa-registered"></i></span>
        <span>registered</span>
    </li>
    <li>
        <span><i class="fa fa-creative-commons"></i></span>
        <span>creative-commons</span>
    </li>
    <li>
        <span><i class="fa fa-gg"></i></span>
        <span>gg</span>
    </li>
    <li>
        <span><i class="fa fa-gg-circle"></i></span>
        <span>gg-circle</span>
    </li>
    <li>
        <span><i class="fa fa-tripadvisor"></i></span>
        <span>tripadvisor</span>
    </li>
    <li>
        <span><i class="fa fa-odnoklassniki"></i></span>
        <span>odnoklassniki</span>
    </li>
    <li>
        <span><i class="fa fa-odnoklassniki-square"></i></span>
        <span>odnoklassniki-square</span>
    </li>
    <li>
        <span><i class="fa fa-get-pocket"></i></span>
        <span>get-pocket</span>
    </li>
    <li>
        <span><i class="fa fa-wikipedia-w"></i></span>
        <span>wikipedia-w</span>
    </li>
    <li>
        <span><i class="fa fa-safari"></i></span>
        <span>safari</span>
    </li>
    <li>
        <span><i class="fa fa-chrome"></i></span>
        <span>chrome</span>
    </li>
    <li>
        <span><i class="fa fa-firefox"></i></span>
        <span>firefox</span>
    </li>
    <li>
        <span><i class="fa fa-opera"></i></span>
        <span>opera</span>
    </li>
    <li>
        <span><i class="fa fa-internet-explorer"></i></span>
        <span>internet-explorer</span>
    </li>
    <li>
        <span><i class="fa fa-tv"></i></span>
        <span>tv</span>
    </li>
    <li>
        <span><i class="fa fa-television"></i></span>
        <span>television</span>
    </li>
    <li>
        <span><i class="fa fa-contao"></i></span>
        <span>contao</span>
    </li>
    <li>
        <span><i class="fa fa-500px"></i></span>
        <span>500px</span>
    </li>
    <li>
        <span><i class="fa fa-amazon"></i></span>
        <span>amazon</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-plus-o"></i></span>
        <span>calendar-plus-o</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-minus-o"></i></span>
        <span>calendar-minus-o</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-times-o"></i></span>
        <span>calendar-times-o</span>
    </li>
    <li>
        <span><i class="fa fa-calendar-check-o"></i></span>
        <span>calendar-check-o</span>
    </li>
    <li>
        <span><i class="fa fa-industry"></i></span>
        <span>industry</span>
    </li>
    <li>
        <span><i class="fa fa-map-pin"></i></span>
        <span>map-pin</span>
    </li>
    <li>
        <span><i class="fa fa-map-signs"></i></span>
        <span>map-signs</span>
    </li>
    <li>
        <span><i class="fa fa-map-o"></i></span>
        <span>map-o</span>
    </li>
    <li>
        <span><i class="fa fa-map"></i></span>
        <span>map</span>
    </li>
    <li>
        <span><i class="fa fa-commenting"></i></span>
        <span>commenting</span>
    </li>
    <li>
        <span><i class="fa fa-commenting-o"></i></span>
        <span>commenting-o</span>
    </li>
    <li>
        <span><i class="fa fa-houzz"></i></span>
        <span>houzz</span>
    </li>
    <li>
        <span><i class="fa fa-vimeo"></i></span>
        <span>vimeo</span>
    </li>
    <li>
        <span><i class="fa fa-black-tie"></i></span>
        <span>black-tie</span>
    </li>
    <li>
        <span><i class="fa fa-fonticons"></i></span>
        <span>fonticons</span>
    </li>
    <li>
        <span><i class="fa fa-reddit-alien"></i></span>
        <span>reddit-alien</span>
    </li>
    <li>
        <span><i class="fa fa-edge"></i></span>
        <span>edge</span>
    </li>
    <li>
        <span><i class="fa fa-credit-card-alt"></i></span>
        <span>credit-card-alt</span>
    </li>
    <li>
        <span><i class="fa fa-codiepie"></i></span>
        <span>codiepie</span>
    </li>
    <li>
        <span><i class="fa fa-modx"></i></span>
        <span>modx</span>
    </li>
    <li>
        <span><i class="fa fa-fort-awesome"></i></span>
        <span>fort-awesome</span>
    </li>
    <li>
        <span><i class="fa fa-usb"></i></span>
        <span>usb</span>
    </li>
    <li>
        <span><i class="fa fa-product-hunt"></i></span>
        <span>product-hunt</span>
    </li>
    <li>
        <span><i class="fa fa-mixcloud"></i></span>
        <span>mixcloud</span>
    </li>
    <li>
        <span><i class="fa fa-scribd"></i></span>
        <span>scribd</span>
    </li>
    <li>
        <span><i class="fa fa-pause-circle"></i></span>
        <span>pause-circle</span>
    </li>
    <li>
        <span><i class="fa fa-pause-circle-o"></i></span>
        <span>pause-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-stop-circle"></i></span>
        <span>stop-circle</span>
    </li>
    <li>
        <span><i class="fa fa-stop-circle-o"></i></span>
        <span>stop-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-shopping-bag"></i></span>
        <span>shopping-bag</span>
    </li>
    <li>
        <span><i class="fa fa-shopping-basket"></i></span>
        <span>shopping-basket</span>
    </li>
    <li>
        <span><i class="fa fa-hashtag"></i></span>
        <span>hashtag</span>
    </li>
    <li>
        <span><i class="fa fa-bluetooth"></i></span>
        <span>bluetooth</span>
    </li>
    <li>
        <span><i class="fa fa-bluetooth-b"></i></span>
        <span>bluetooth-b</span>
    </li>
    <li>
        <span><i class="fa fa-percent"></i></span>
        <span>percent</span>
    </li>
    <li>
        <span><i class="fa fa-gitlab"></i></span>
        <span>gitlab</span>
    </li>
    <li>
        <span><i class="fa fa-wpbeginner"></i></span>
        <span>wpbeginner</span>
    </li>
    <li>
        <span><i class="fa fa-wpforms"></i></span>
        <span>wpforms</span>
    </li>
    <li>
        <span><i class="fa fa-envira"></i></span>
        <span>envira</span>
    </li>
    <li>
        <span><i class="fa fa-universal-access"></i></span>
        <span>universal-access</span>
    </li>
    <li>
        <span><i class="fa fa-wheelchair-alt"></i></span>
        <span>wheelchair-alt</span>
    </li>
    <li>
        <span><i class="fa fa-question-circle-o"></i></span>
        <span>question-circle-o</span>
    </li>
    <li>
        <span><i class="fa fa-blind"></i></span>
        <span>blind</span>
    </li>
    <li>
        <span><i class="fa fa-audio-description"></i></span>
        <span>audio-description</span>
    </li>
    <li>
        <span><i class="fa fa-volume-control-phone"></i></span>
        <span>volume-control-phone</span>
    </li>
    <li>
        <span><i class="fa fa-braille"></i></span>
        <span>braille</span>
    </li>
    <li>
        <span><i class="fa fa-assistive-listening-systems"></i></span>
        <span>assistive-listening-systems</span>
    </li>
    <li>
        <span><i class="fa fa-asl-interpreting"></i></span>
        <span>asl-interpreting</span>
    </li>
    <li>
        <span><i class="fa fa-american-sign-language-interpreting"></i></span>
        <span>american-sign-language-interpreting</span>
    </li>
    <li>
        <span><i class="fa fa-deafness"></i></span>
        <span>deafness</span>
    </li>
    <li>
        <span><i class="fa fa-hard-of-hearing"></i></span>
        <span>hard-of-hearing</span>
    </li>
    <li>
        <span><i class="fa fa-deaf"></i></span>
        <span>deaf</span>
    </li>
    <li>
        <span><i class="fa fa-glide"></i></span>
        <span>glide</span>
    </li>
    <li>
        <span><i class="fa fa-glide-g"></i></span>
        <span>glide-g</span>
    </li>
    <li>
        <span><i class="fa fa-signing"></i></span>
        <span>signing</span>
    </li>
    <li>
        <span><i class="fa fa-sign-language"></i></span>
        <span>sign-language</span>
    </li>
    <li>
        <span><i class="fa fa-low-vision"></i></span>
        <span>low-vision</span>
    </li>
    <li>
        <span><i class="fa fa-viadeo"></i></span>
        <span>viadeo</span>
    </li>
    <li>
        <span><i class="fa fa-viadeo-square"></i></span>
        <span>viadeo-square</span>
    </li>
    <li>
        <span><i class="fa fa-snapchat"></i></span>
        <span>snapchat</span>
    </li>
    <li>
        <span><i class="fa fa-snapchat-ghost"></i></span>
        <span>snapchat-ghost</span>
    </li>
    <li>
        <span><i class="fa fa-snapchat-square"></i></span>
        <span>snapchat-square</span>
    </li>
    <li>
        <span><i class="fa fa-pied-piper"></i></span>
        <span>pied-piper</span>
    </li>
    <li>
        <span><i class="fa fa-first-order"></i></span>
        <span>first-order</span>
    </li>
    <li>
        <span><i class="fa fa-yoast"></i></span>
        <span>yoast</span>
    </li>
    <li>
        <span><i class="fa fa-themeisle"></i></span>
        <span>themeisle</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus-circle"></i></span>
        <span>google-plus-circle</span>
    </li>
    <li>
        <span><i class="fa fa-google-plus-official"></i></span>
        <span>google-plus-official</span>
    </li>
    <li>
        <span><i class="fa fa-fa"></i></span>
        <span>fa</span>
    </li>
    <li>
        <span><i class="fa fa-font-awesome"></i></span>
        <span>font-awesome</span>
    </li>
</ul>