<div class="row">
 <div class="col-xs-12">
	<h3 class="header smaller lighter green">Application Buttons</h3>
	<!-- #section:elements.button.app -->
	<p>
		<a href="#" class="btn btn-default btn-app radius-4">
			<i class="ace-icon fa fa-cog bigger-230"></i>
			Default
			<span class="badge badge-pink">+3</span>
		</a>
		
		<a href="#" class="btn btn-app btn-primary no-radius">
			<i class="ace-icon fa fa-pencil-square-o bigger-230"></i>
			Edit
			<span class="badge badge-warning badge-left">11</span>
		</a>
		
		<a href="#"  class="btn btn-app btn-success">
			<i class="ace-icon fa fa-refresh bigger-230"></i>
			Reload
		</a>
		
		<button class="btn btn-app btn-warning">
			<i class="ace-icon fa fa-undo bigger-230"></i>
			Undo
		</button>

		<a href="#" class="btn btn-app btn-info btn-sm no-radius">
			<i class="ace-icon fa fa-envelope bigger-200"></i>
			Mailbox
			<span class="label label-inverse arrowed-in">6+</span>
		</a>
		
		<button class="btn btn-app btn-danger btn-sm">
			<i class="ace-icon fa fa-trash-o bigger-200"></i>
			Delete
		</button>
		
		<button class="btn btn-app btn-purple btn-sm">
			<i class="ace-icon fa fa-cloud-upload bigger-200"></i>
			Upload
		</button>
		
		<button class="btn btn-app btn-pink btn-sm">
			<i class="ace-icon fa fa-share bigger-200"></i>
			Share
		</button>
		
		<button class="btn btn-app btn-inverse btn-xs">
			<i class="ace-icon fa fa-lock bigger-160"></i>
			Lock
		</button>
		
		<button class="btn btn-app btn-grey btn-xs radius-4">
			<i class="ace-icon fa fa-floppy-o bigger-160"></i>
			Save
			<span class="badge badge-transparent"><i class="light-red ace-icon fa fa-asterisk"></i></span>
		</button>
		
		<button class="btn btn-app btn-light btn-xs">
			<i class="ace-icon fa fa-print bigger-160"></i>
			Print
		</button>


		<a href="#" class="btn btn-app btn-yellow btn-xs">
			<i class="ace-icon fa fa-shopping-cart bigger-160"></i>
			Shop
		</a>
		
		
		<div class="btn-group">
			<button class="btn btn-app btn-pink btn-xs">
				<i class="ace-icon fa fa-share bigger-175"></i>
				Share
			</button>
			<button data-toggle="dropdown" class="btn btn-app btn-pink btn-xs dropdown-toggle"><span class="bigger-110 ace-icon fa fa-caret-down icon-only"></span></button>
			<ul class="dropdown-menu dropdown-pink">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /.btn-group -->
		
		
	</p>
	<!-- /section:elements.button.app -->
 </div>
</div>

<div class="space"></div>

<div class="row">

 <div class="col-sm-6" id="default-buttons">
	<h3 class="row header smaller lighter purple">
		<span class="col-sm-6">
			Default Buttons
		</span><!-- /.col -->
		<span class="col-sm-6">
			<label class="pull-right inline">
				<small class="muted smaller-90">Border:</small>
				<input id="id-button-borders" checked type="checkbox" class="ace ace-switch ace-switch-5" />
				<span class="lbl middle"></span>
			</label>
		</span><!-- /.col -->
	</h3><!-- /.row -->

	<!-- #section:elements.button -->
	<p>
		<button class="btn">Default </button>
		<button class="btn btn-primary">Primary</button>
		<button class="btn btn-info">Info</button>
		<button class="btn btn-success">Success</button>
	</p>
	<p>
		<button class="btn btn-warning">Warning</button>
		<button class="btn btn-danger">Danger</button>
		<button class="btn btn-inverse">Inverse</button>
		<button class="btn btn-pink">Pink</button>
	</p>
	<p>
		<button class="btn btn-purple">Purple</button>
		<button class="btn btn-yellow">Yellow</button>
		<button class="btn btn-grey">Grey</button>
		<button class="btn btn-light">Light</button>
		<button class="btn btn-link">Link</button>
	</p>
	<!-- /section:elements.button -->
	
	<!-- #section:elements.button.white -->
	<p>
		<button type="button" class="btn btn-white">White</button>
		<button type="button" class="btn btn-white btn-default">Default</button>
		<button type="button" class="btn btn-white btn-primary">Primary</button>
		<button type="button" class="btn btn-white btn-info">Info</button>
		<button type="button" class="btn btn-white btn-success">Success</button>
		<button type="button" class="btn btn-white btn-warning">Warning</button>
	</p>
	<p>
		<button type="button" class="btn btn-white btn-danger btn-sm">Danger</button>
		<button type="button" class="btn btn-white btn-yellow btn-sm">Yellow</button>
		<button type="button" class="btn btn-white btn-pink btn-sm">Pink</button>
		<button type="button" class="btn btn-white btn-purple btn-sm">Purple</button>
		<button type="button" class="btn btn-white btn-inverse btn-sm">Inverse</button>
	</p>
	<!-- /section:elements.button.white -->
	
	<h3 class="header smaller lighter green">Button with Icons</h3>
	<p>
		<button class="btn btn-white btn-info btn-bold">
			<i class="ace-icon fa fa-floppy-o bigger-120 blue"></i> Backup
		</button>
		<button class="btn btn-white btn-warning btn-bold">
			<i class="ace-icon fa fa-trash-o bigger-120 orange"></i> Delete
		</button>
		<button class="btn btn-white btn-default btn-round">
			<i class="ace-icon fa fa-times red2"></i> Cancel
		</button>
	</p>
	<div class="hr hr-dotted hr-16"></div>
	<p>
		<button class="btn"><i class="ace-icon fa fa-pencil align-top bigger-125"></i> Default </button>
		<button class="btn btn-primary"><i class="ace-icon fa fa-flask align-top bigger-125"></i> Primary</button>
		<button class="btn btn-info">Info <i class="ace-icon fa fa-print  align-top bigger-125 icon-on-right"></i></button>
	</p>
	<p>
		<button class="btn btn-lg btn-success"><i class="ace-icon fa fa-check"></i> Success</button>
		<button class="btn btn-sm btn-warning"><i class="ace-icon fa fa-fire bigger-110"></i> <span class="bigger-110 no-text-shadow">Warning</span></button>
		<button class="btn btn-xs btn-danger"><i class="ace-icon fa fa-bolt bigger-110"></i> Danger <i class="ace-icon fa fa-arrow-right icon-on-right"></i></button>
	</p>
	<p>
		<button class="btn btn-info"><i class="ace-icon fa fa-signal icon-only bigger-150"></i></button>
		<button class="btn btn-warning btn-xs"><i class="ace-icon fa fa-wrench  bigger-110 icon-only"></i></button>		
		<button class="btn btn-danger btn-sm"><i class="ace-icon fa fa-reply icon-only"></i></button>
		<button class="btn btn-grey btn-lg"><i class="ace-icon fa fa-trash-o fa-2x icon-only"></i></button>
	</p>
 </div><!-- /.col -->

 <div class="col-sm-6">
	<h3 class="header smaller lighter red">Button Sizing</h3>
	<p>
		<button class="btn btn-minier btn-yellow">Minier</button>
		<button class="btn btn-xs">Mini</button>
		<button class="btn btn-sm btn-primary">Small</button>
		<button class="btn btn-info">Default</button>
		<button class="btn btn-lg btn-success">Large Size</button>
	</p>
	
	<p>
		<button class="btn btn-warning btn-lg">Large Size</button>
		<button class="btn btn-danger">Default</button>
		<button class="btn btn-sm btn-inverse">Small</button>
		<button class="btn btn-xs btn-pink">Pink</button>
		<button class="btn btn-minier btn-purple">Purple</button>
	</p>
	
	<h3 class="header smaller lighter grey">Disabled Buttons</h3>
	<p>
		<button class="btn disabled">Default </button>
		<button class="btn disabled btn-primary">Primary</button>
		<button class="btn disabled btn-info">Info</button>
		<button class="btn disabled btn-success">Success</button>
	</p>
	<hr />
	<p>
		<button class="btn btn-danger btn-block">Block Button</button>
	</p>
	
 </div><!-- /.col -->

</div><!-- /.row -->


<hr />


<div class="row">

 <div class="col-sm-6">
	<h3 class="header smaller lighter blue">Button Groups</h3>
	<p>
		<div class="btn-group">
			<button type="button" class="btn">1</button>
			<button type="button" class="btn">2</button>
			<button type="button" class="btn">3</button>
		</div>
	
	<p>
	  <div class="btn-group">
		  <button type="button" class="btn btn-white btn-sm btn-primary">Left</button>
		  <button type="button" class="btn btn-white btn-sm btn-primary">Middle</button>
		  <button type="button" class="btn btn-white btn-sm btn-primary">Right</button>
	  </div>

	<p>
		<div class="btn-toolbar">
			<div class="btn-group">
				<button class="btn btn-light">1</button>
				<button class="btn btn-light">2</button>
				<button class="btn btn-light">3</button>
				<button class="btn btn-light">4</button>
			</div>
			<div class="btn-group btn-corner">
				<button class="btn">5</button>
				<button class="btn">6</button>
				<button class="btn">7</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-grey">8</button>
			</div>
		</div>

	<p>
		<div class="btn-group btn-group-vertical">
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-left"></i></button>
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-center"></i></button>
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-right"></i></button>
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-justify"></i></button>
		</div>

		<div class="space-6"></div>
		
	<p>
		<button id="loading-btn" type="button" class="btn btn-success" data-loading-text="Loading...">Loading state</button>
		<button type="button" class="btn btn-primary" data-toggle="button" >Single Toggle</button>

		<button type="button" class="btn btn-sm btn-danger" data-toggle="button" >Small</button>
		<button type="button" class="btn btn-xs btn-info" data-toggle="button" >Mini</button>

	
	<p>
	  <div>
		<span>Checkbox: &nbsp;</span>
		<div data-toggle="buttons" class="btn-group">
			<label class="btn btn-sm">
				<input type="checkbox" value="1" />
				<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
			</label>
			<label class="btn btn-sm">
				<input type="checkbox" value="2" />
				<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
			</label>
			<label class="btn btn-sm">
				<input type="checkbox" value="3" />
				<i class="icon-only ace-icon fa fa-underline bigger-110"></i>
			</label>
		</div>
	  </div>

	<p>
	  <div>
		<span>Checkbox: &nbsp;</span>
		<!-- #section:elements.button.group -->
		<div data-toggle="buttons" class="btn-group btn-overlap btn-corner">
			<label class="btn btn-sm btn-white btn-info">
				<input type="checkbox" value="1" />
				<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
			</label>
			<label class="btn btn-sm btn-white btn-info">
				<input type="checkbox" value="2" />
				<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
			</label>
			<label class="btn btn-sm btn-white btn-info">
				<input type="checkbox" value="3" />
				<i class="icon-only ace-icon fa fa-underline bigger-110"></i>
			</label>
		</div>
		<!-- /section:elements.button.group -->
	  </div>
	
	<p>
	  <div>
		<span>Radio: &nbsp;</span>
		<div data-toggle="buttons" class="btn-group">
			<label class="btn btn-primary">
				<input type="radio" value="1" />
				<i class="icon-only ace-icon fa fa-align-left"></i>
			</label>
			<label class="btn btn-primary">
				<input type="radio" value="2" />
				<i class="icon-only ace-icon fa fa-align-center"></i>
			</label>
			<label class="btn btn-primary">
				<input type="radio" value="3" />
				<i class="icon-only ace-icon fa fa-align-right"></i>
			</label>
		</div>
		<label class="btn btn-primary" data-toggle="button">
			<i class="icon-only ace-icon fa fa-align-justify"></i>
		</label>
	  </div>

 </div><!-- /.span -->

 <div class="col-sm-6">
	<h3 class="header smaller lighter green">Button Dropdown</h3>
	<p>
		<div class="btn-toolbar">
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-default">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle">Action <i class="ace-icon fa fa-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-sm btn-danger dropdown-toggle">Danger <i class="ace-icon fa fa-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu dropdown-danger">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		</div>

		<div class="space-4"></div>

		<div class="btn-toolbar">
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-warning">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-success btn-lg dropdown-toggle">Success large <i class="ace-icon fa fa-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu dropdown-success dropdown-menu-right">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		</div>
		
		<div class="space-4"></div>
		
		<div class="btn-toolbar">
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-info btn-sm dropdown-toggle">Info small <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-info dropdown-menu-right">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-inverse btn-xs dropdown-toggle">Inverse mini <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-inverse">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		</div>

	<hr />
	<p>
		<div class="btn-toolbar">
			<div class="btn-group">
                <button class="btn">Action</button>
                <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div class="btn-group">
                <button class="btn btn-sm btn-yellow">Some Action</button>
                <button data-toggle="dropdown" class="btn btn-sm btn-yellow dropdown-toggle"><i class="ace-icon fa fa-angle-down icon-only"></i></button>
                <ul class="dropdown-menu dropdown-yellow">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div class="btn-group dropup">
                <button class="btn btn-xs btn-danger">Danger</button>
                <button data-toggle="dropdown" class="btn btn-xs btn-danger dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-danger">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
			</div>

			<div class="space-2"></div>

			<div class="btn-toolbar">
              <div class="btn-group">
                <button class="btn btn-lg btn-warning">Warning</button>
                <button data-toggle="dropdown" class="btn btn-lg btn-warning dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only smaller-90"></span></button>
                <ul class="dropdown-menu dropdown-warning">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div class="btn-group">
                <button class="btn btn-success">Success</button>
                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-success">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div class="btn-group">
                <button class="btn btn-info btn-white">Info</button>
                <button data-toggle="dropdown" class="btn btn-info btn-white dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-info dropdown-menu-right">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
			</div>
			
			<div class="space-2"></div>
			
		    <div class="btn-toolbar">
              <div class="btn-group">
                <button class="btn btn-inverse">Inverse</button>
                <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-inverse">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
            </div>
			

 </div><!-- /.span -->

</div><!-- /.row -->


<hr />


<div class="row">
	<div class="col-sm-6">
		<h3 class="header smaller lighter green">Lables & Badges</h3>
		<!-- #section:elements.label -->
		<p>
			<span class="label">Default</span>
			<span class="label label-success arrowed">Success</span>
			<span class="label label-warning">
				<i class="ace-icon fa fa-exclamation-triangle bigger-120"></i> Warning
			</span>
			<span class="label label-danger arrowed-in">Danger</span>
			<span class="label label-info arrowed-in-right arrowed">Info</span>
			<span class="label label-inverse">Inverse</span>
		</p>
		<!-- /section:elements.label -->
		
		<!-- #section:elements.badge -->
		<p>
			<span class="badge">1</span>
			<span class="badge badge-grey">1</span>
			<span class="badge badge-success">2</span>
			<span class="badge badge-warning">4</span>
			<span class="badge badge-danger">6</span>
			<span class="badge badge-info">8</span>
			<span class="badge badge-purple">3</span>
			<span class="badge badge-inverse">10</span>
			<span class="badge badge-pink">11</span>
			<span class="badge badge-yellow">2</span>
		</p>
		<!-- /section:elements.badge -->
		
		<p>
			<span class="label label-lg label-pink arrowed-right">Large</span>
			<span class="label label-lg label-yellow arrowed-in">Yellow</span>
			<span class="label label-lg label-purple arrowed">Purple</span>
		</p>
		<p>
			<span class="label label-xlg label-primary arrowed arrowed-right">Larger</span>
			<span class="label label-xlg label-grey arrowed-in-right arrowed-in">Grey</span>
			<span class="label label-xlg label-light arrowed-in-right">Light</span>
		</p>
		<p>
			<span class="label label-sm label-primary arrowed arrowed-right">Smaller</span>
		</p>
		
		
	</div><!-- /.span -->
	
	<div class="col-sm-6">
		<h3 class="header smaller lighter red">Pagination</h3>
		<div>
              <ul class="pagination">
                <li class="disabled"><a href="#"><i class="ace-icon fa fa-angle-double-left"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><i class="ace-icon fa fa-angle-double-right"></i></a></li>
              </ul>
            </div>

		
		<p>
			<ul class="pager">
              <li class="previous"><a href="#">&larr; Older</a></li>
              <li class="next"><a href="#">Newer &rarr;</a></li>
            </ul>

		
	</div><!-- /.span -->
</div><!-- /.row -->


<hr />

<div class="row">
	 <div class="col-xs-12">
		<h3 class="header smaller lighter blue">369 Scalable FontAwesome Icons <small><a href="http://fontawesome.io/icons/" target="_blank">(see all icons <i class="ace-icon fa fa-external-link"></i>)</a> </small></h3>
	 </div>
	
	<div class="col-xs-6 col-sm-3">
    <ul class="list-unstyled">
		<li><i class="ace-icon fa fa-adjust"></i> fa-adjust</li>
		<li><i class="ace-icon fa fa-asterisk"></i> fa-asterisk</li>
		<li><i class="ace-icon fa fa-ban"></i> fa-ban</li>
		<li><i class="ace-icon fa fa-bar-chart-o"></i> fa-bar-chart-o</li>
		<li><i class="ace-icon fa fa-barcode"></i> fa-barcode</li>
		<li><i class="ace-icon fa fa-flask"></i> fa-flask</li>
		<li><i class="ace-icon fa fa-beer"></i> fa-beer</li>
		<li><i class="ace-icon fa fa-bell-o"></i> fa-bell-o</li>
		<li><i class="ace-icon fa fa-bell"></i> fa-bell</li>
		<li><i class="ace-icon fa fa-bolt"></i> fa-bolt</li>
		<li><i class="ace-icon fa fa-book"></i> fa-book</li>
		<li><i class="ace-icon fa fa-bookmark"></i> fa-bookmark</li>
		<li><i class="ace-icon fa fa-bookmark-o"></i> fa-bookmark-o</li>
		<li><i class="ace-icon fa fa-briefcase"></i> fa-briefcase</li>
		<li><i class="ace-icon fa fa-bullhorn"></i> fa-bullhorn</li>
		<li><i class="ace-icon fa fa-calendar"></i> fa-calendar</li>
		<li><i class="ace-icon fa fa-camera"></i> fa-camera</li>
		<li><i class="ace-icon fa fa-camera-retro"></i> fa-camera-retro</li>
		<li><i class="ace-icon fa fa-certificate"></i> fa-certificate</li>
	</ul>
    </div>
	
	<div class="col-xs-6 col-sm-3">
    <ul class="list-unstyled">
		<li><i class="ace-icon fa fa-check-square-o"></i> fa-check-square-o</li>
		<li><i class="ace-icon fa fa-square-o"></i> fa-square-o</li>
		<li><i class="ace-icon fa fa-circle"></i> fa-circle</li>
		<li><i class="ace-icon fa fa-circle-o"></i> fa-circle-o</li>
		<li><i class="ace-icon fa fa-cloud"></i> fa-cloud</li>
		<li><i class="ace-icon fa fa-cloud-download"></i> fa-cloud-download</li>
		<li><i class="ace-icon fa fa-cloud-upload"></i> fa-cloud-upload</li>
		<li><i class="ace-icon fa fa-coffee"></i> fa-coffee</li>
		<li><i class="ace-icon fa fa-cog"></i> fa-cog</li>
		<li><i class="ace-icon fa fa-cogs"></i> fa-cogs</li>
		<li><i class="ace-icon fa fa-comment"></i> fa-comment</li>
		<li><i class="ace-icon fa fa-comment-o"></i> fa-comment-o</li>
		<li><i class="ace-icon fa fa-comments"></i> fa-comments</li>
		<li><i class="ace-icon fa fa-comments-o"></i> fa-comments-o</li>
		<li><i class="ace-icon fa fa-credit-card"></i> fa-credit-card</li>
		<li><i class="ace-icon fa fa-tachometer"></i> fa-tachometer</li>
		<li><i class="ace-icon fa fa-desktop"></i> fa-desktop</li>
		<li><i class="ace-icon fa fa-arrow-circle-o-down"></i> fa-arrow-circle-o-down</li>
		<li><i class="ace-icon fa fa-download"></i> fa-download</li>
    </ul>
  </div>
  
  <div class="col-xs-6 col-sm-3">
	<ul class="list-unstyled">
		<li><i class="ace-icon fa fa-pencil-square-o"></i> fa-pencil-square-o</li>
		<li><i class="ace-icon fa fa-envelope"></i> fa-envelope</li>
		<li><i class="ace-icon fa fa-envelope-o"></i> fa-envelope-o</li>
		<li><i class="ace-icon fa fa-exchange"></i> fa-exchange</li>
		<li><i class="ace-icon fa fa-exclamation-circle"></i> fa-exclamation-circle</li>
		<li><i class="ace-icon fa fa-external-link"></i> fa-external-link</li>
		<li><i class="ace-icon fa fa-eye-slash"></i> fa-eye-slash</li>
		<li><i class="ace-icon fa fa-eye"></i> fa-eye</li>
		<li><i class="ace-icon fa fa-video-camera"></i> fa-video-camera</li>
		<li><i class="ace-icon fa fa-fighter-jet"></i> fa-fighter-jet</li>
		<li><i class="ace-icon fa fa-film"></i> fa-film</li>
		<li><i class="ace-icon fa fa-filter"></i> fa-filter</li>
		<li><i class="ace-icon fa fa-fire"></i> fa-fire</li>
		<li><i class="ace-icon fa fa-flag"></i> fa-flag</li>
		<li><i class="ace-icon fa fa-folder"></i> fa-folder</li>
		<li><i class="ace-icon fa fa-folder-open"></i> fa-folder-open</li>
		<li><i class="ace-icon fa fa-folder-o"></i> fa-folder-o</li>
		<li><i class="ace-icon fa fa-folder-open-o"></i> fa-folder-open-o</li>
		<li><i class="ace-icon fa fa-cutlery"></i> fa-cutlery</li>
	</ul>
  </div>
	
  <div class="col-xs-6 col-sm-3">
    <ul class="list-unstyled">
		<li><i class="ace-icon fa fa-gift"></i> fa-gift</li>
		<li><i class="ace-icon fa fa-glass"></i> fa-glass</li>
		<li><i class="ace-icon fa fa-globe"></i> fa-globe</li>
		<li><i class="ace-icon fa fa-users"></i> fa-users</li>
		<li><i class="ace-icon fa fa-hdd-o"></i> fa-hdd-o</li>
		<li><i class="ace-icon fa fa-headphones"></i> fa-headphones</li>
		<li><i class="ace-icon fa fa-heart"></i> fa-heart</li>
		<li><i class="ace-icon fa fa-heart-o"></i> fa-heart-o</li>
		<li><i class="ace-icon fa fa-home"></i> fa-home</li>
		<li><i class="ace-icon fa fa-inbox"></i> fa-inbox</li>
		<li><i class="ace-icon fa fa-info-circle"></i> fa-info-circle</li>
		<li><i class="ace-icon fa fa-key"></i> fa-key</li>
		<li><i class="ace-icon fa fa-leaf"></i> fa-leaf</li>
		<li><i class="ace-icon fa fa-laptop"></i> fa-laptop</li>
		<li><i class="ace-icon fa fa-gavel"></i> fa-gavel</li>
		<li><i class="ace-icon fa fa-lemon-o"></i> fa-lemon-o</li>
		<li><i class="ace-icon fa fa-lightbulb-o"></i> fa-lightbulb-o</li>
		<li><i class="ace-icon fa fa-lock"></i> fa-lock</li>
		<li><i class="ace-icon fa fa-unlock"></i> fa-unlock</li>
    </ul>
  </div>

</div>



<hr />

<div class="row">
	 <div class="col-xs-12">
		<h3 class="header smaller lighter blue">200 Scalable Glyphicons <small><a href="http://getbootstrap.com/components/#glyphicons" target="_blank">(see all icons <i class="ace-icon fa fa-external-link"></i>)</a> </small></h3>
	 </div>
	
  <div class="col-xs-6 col-sm-3">
	<ul class="list-unstyled">
		<li><i class="ace-icon glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
		<li><i class="ace-icon glyphicon glyphicon-plus"></i> glyphicon-plus</li>
		<li><i class="ace-icon glyphicon glyphicon-euro"></i> glyphicon-euro</li>
		<li><i class="ace-icon glyphicon glyphicon-minus"></i> glyphicon-minus</li>
		<li><i class="ace-icon glyphicon glyphicon-cloud"></i> glyphicon-cloud</li>
		<li><i class="ace-icon glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
		<li><i class="ace-icon glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
		<li><i class="ace-icon glyphicon glyphicon-glass"></i> glyphicon-glass</li>
		<li><i class="ace-icon glyphicon glyphicon-music"></i> glyphicon-music</li>
		<li><i class="ace-icon glyphicon glyphicon-search"></i> glyphicon-search</li>
		<li><i class="ace-icon glyphicon glyphicon-heart"></i> glyphicon-heart</li>
		<li><i class="ace-icon glyphicon glyphicon-star"></i> glyphicon-star</li>
		<li><i class="ace-icon glyphicon glyphicon-star"></i> glyphicon-star-empty</li>
		<li><i class="ace-icon glyphicon glyphicon-user"></i> glyphicon-user</li>
		<li><i class="ace-icon glyphicon glyphicon-film"></i> glyphicon-film</li>
		<li><i class="ace-icon glyphicon glyphicon-th"></i> glyphicon-th-large</li>
		<li><i class="ace-icon glyphicon glyphicon-th"></i> glyphicon-th</li>
		<li><i class="ace-icon glyphicon glyphicon-th"></i> glyphicon-th-list</li>
		<li><i class="ace-icon glyphicon glyphicon-ok"></i> glyphicon-ok</li>
	</ul>
  </div>

  <div class="col-xs-6 col-sm-3">
	<ul class="list-unstyled">
		<li><i class="ace-icon glyphicon glyphicon-remove"></i> glyphicon-remove</li>
		<li><i class="ace-icon glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
		<li><i class="ace-icon glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
		<li><i class="ace-icon glyphicon glyphicon-off"></i> glyphicon-off</li>
		<li><i class="ace-icon glyphicon glyphicon-signal"></i> glyphicon-signal</li>
		<li><i class="ace-icon glyphicon glyphicon-cog"></i> glyphicon-cog</li>
		<li><i class="ace-icon glyphicon glyphicon-trash"></i> glyphicon-trash</li>
		<li><i class="ace-icon glyphicon glyphicon-home"></i> glyphicon-home</li>
		<li><i class="ace-icon glyphicon glyphicon-file"></i> glyphicon-file</li>
		<li><i class="ace-icon glyphicon glyphicon-time"></i> glyphicon-time</li>
		<li><i class="ace-icon glyphicon glyphicon-road"></i> glyphicon-road</li>
		<li><i class="ace-icon glyphicon glyphicon-download"></i> glyphicon-download-alt</li>
		<li><i class="ace-icon glyphicon glyphicon-download"></i> glyphicon-download</li>
		<li><i class="ace-icon glyphicon glyphicon-upload"></i> glyphicon-upload</li>
		<li><i class="ace-icon glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>
		<li><i class="ace-icon glyphicon glyphicon-play"></i> glyphicon-play-circle</li>
		<li><i class="ace-icon glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
		<li><i class="ace-icon glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
		<li><i class="ace-icon glyphicon glyphicon-list"></i> glyphicon-list-alt</li>
	</ul>
  </div>

  <div class="col-xs-6 col-sm-3">
	<ul class="list-unstyled">
		<li><i class="ace-icon glyphicon glyphicon-lock"></i> glyphicon-lock</li>
		<li><i class="ace-icon glyphicon glyphicon-flag"></i> glyphicon-flag</li>
		<li><i class="ace-icon glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
		<li><i class="ace-icon glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
		<li><i class="ace-icon glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
		<li><i class="ace-icon glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
		<li><i class="ace-icon glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
		<li><i class="ace-icon glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
		<li><i class="ace-icon glyphicon glyphicon-tag"></i> glyphicon-tag</li>
		<li><i class="ace-icon glyphicon glyphicon-tags"></i> glyphicon-tags</li>
		<li><i class="ace-icon glyphicon glyphicon-book"></i> glyphicon-book</li>
		<li><i class="ace-icon glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
		<li><i class="ace-icon glyphicon glyphicon-print"></i> glyphicon-print</li>
		<li><i class="ace-icon glyphicon glyphicon-camera"></i> glyphicon-camera</li>
		<li><i class="ace-icon glyphicon glyphicon-font"></i> glyphicon-font</li>
		<li><i class="ace-icon glyphicon glyphicon-bold"></i> glyphicon-bold</li>
		<li><i class="ace-icon glyphicon glyphicon-italic"></i> glyphicon-italic</li>
		<li><i class="ace-icon glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
		<li><i class="ace-icon glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
	</ul>
  </div>

  <div class="col-xs-6 col-sm-3">
	<ul class="list-unstyled">
		<li><i class="ace-icon glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
		<li><i class="ace-icon glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
		<li><i class="ace-icon glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
		<li><i class="ace-icon glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
		<li><i class="ace-icon glyphicon glyphicon-list"></i> glyphicon-list</li>
		<li><i class="ace-icon glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
		<li><i class="ace-icon glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
		<li><i class="ace-icon glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
		<li><i class="ace-icon glyphicon glyphicon-picture"></i> glyphicon-picture</li>
		<li><i class="ace-icon glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
		<li><i class="ace-icon glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
		<li><i class="ace-icon glyphicon glyphicon-tint"></i> glyphicon-tint</li>
		<li><i class="ace-icon glyphicon glyphicon-edit"></i> glyphicon-edit</li>
		<li><i class="ace-icon glyphicon glyphicon-share"></i> glyphicon-share</li>
		<li><i class="ace-icon glyphicon glyphicon-check"></i> glyphicon-check</li>
		<li><i class="ace-icon glyphicon glyphicon-move"></i> glyphicon-move</li>
		<li><i class="ace-icon glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
		<li><i class="ace-icon glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
		<li><i class="ace-icon glyphicon glyphicon-backward"></i> glyphicon-backward</li>
	</ul>
  </div>
</div>