---
- <!-- Icons
- ================================================== -->
- <div class="bs-docs-section" id="icons">
- <div class="page-header">
- <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
- </div>
-
- <h2 id="icons-list">Included glyphs</h2>
- <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>
-
- <ul class="the-icons clearfix">
- <li><span class="glyphicon glyphicon-glass"></span> glyphicon-glass</li>
- <li><span class="glyphicon glyphicon-music"></span> glyphicon-music</li>
- <li><span class="glyphicon glyphicon-search"></span> glyphicon-search</li>
- <li><span class="glyphicon glyphicon-envelope"></span> glyphicon-envelope</li>
- <li><span class="glyphicon glyphicon-heart"></span> glyphicon-heart</li>
- <li><span class="glyphicon glyphicon-star"></span> glyphicon-star</li>
- <li><span class="glyphicon glyphicon-star-empty"></span> glyphicon-star-empty</li>
- <li><span class="glyphicon glyphicon-user"></span> glyphicon-user</li>
- <li><span class="glyphicon glyphicon-film"></span> glyphicon-film</li>
- <li><span class="glyphicon glyphicon-th-large"></span> glyphicon-th-large</li>
- <li><span class="glyphicon glyphicon-th"></span> glyphicon-th</li>
- <li><span class="glyphicon glyphicon-th-list"></span> glyphicon-th-list</li>
- <li><span class="glyphicon glyphicon-ok"></span> glyphicon-ok</li>
- <li><span class="glyphicon glyphicon-remove"></span> glyphicon-remove</li>
- <li><span class="glyphicon glyphicon-zoom-in"></span> glyphicon-zoom-in</li>
- <li><span class="glyphicon glyphicon-zoom-out"></span> glyphicon-zoom-out</li>
- <li><span class="glyphicon glyphicon-off"></span> glyphicon-off</li>
- <li><span class="glyphicon glyphicon-signal"></span> glyphicon-signal</li>
- <li><span class="glyphicon glyphicon-cog"></span> glyphicon-cog</li>
- <li><span class="glyphicon glyphicon-trash"></span> glyphicon-trash</li>
- <li><span class="glyphicon glyphicon-home"></span> glyphicon-home</li>
- <li><span class="glyphicon glyphicon-file"></span> glyphicon-file</li>
- <li><span class="glyphicon glyphicon-time"></span> glyphicon-time</li>
- <li><span class="glyphicon glyphicon-road"></span> glyphicon-road</li>
- <li><span class="glyphicon glyphicon-download-alt"></span> glyphicon-download-alt</li>
- <li><span class="glyphicon glyphicon-download"></span> glyphicon-download</li>
- <li><span class="glyphicon glyphicon-upload"></span> glyphicon-upload</li>
- <li><span class="glyphicon glyphicon-inbox"></span> glyphicon-inbox</li>
-
- <li><span class="glyphicon glyphicon-play-circle"></span> glyphicon-play-circle</li>
- <li><span class="glyphicon glyphicon-repeat"></span> glyphicon-repeat</li>
- <li><span class="glyphicon glyphicon-refresh"></span> glyphicon-refresh</li>
- <li><span class="glyphicon glyphicon-list-alt"></span> glyphicon-list-alt</li>
- <li><span class="glyphicon glyphicon-lock"></span> glyphicon-lock</li>
- <li><span class="glyphicon glyphicon-flag"></span> glyphicon-flag</li>
- <li><span class="glyphicon glyphicon-headphones"></span> glyphicon-headphones</li>
- <li><span class="glyphicon glyphicon-volume-off"></span> glyphicon-volume-off</li>
- <li><span class="glyphicon glyphicon-volume-down"></span> glyphicon-volume-down</li>
- <li><span class="glyphicon glyphicon-volume-up"></span> glyphicon-volume-up</li>
- <li><span class="glyphicon glyphicon-qrcode"></span> glyphicon-qrcode</li>
- <li><span class="glyphicon glyphicon-barcode"></span> glyphicon-barcode</li>
- <li><span class="glyphicon glyphicon-tag"></span> glyphicon-tag</li>
- <li><span class="glyphicon glyphicon-tags"></span> glyphicon-tags</li>
- <li><span class="glyphicon glyphicon-book"></span> glyphicon-book</li>
- <li><span class="glyphicon glyphicon-bookmark"></span> glyphicon-bookmark</li>
- <li><span class="glyphicon glyphicon-print"></span> glyphicon-print</li>
- <li><span class="glyphicon glyphicon-camera"></span> glyphicon-camera</li>
- <li><span class="glyphicon glyphicon-font"></span> glyphicon-font</li>
- <li><span class="glyphicon glyphicon-bold"></span> glyphicon-bold</li>
- <li><span class="glyphicon glyphicon-italic"></span> glyphicon-italic</li>
- <li><span class="glyphicon glyphicon-text-height"></span> glyphicon-text-height</li>
- <li><span class="glyphicon glyphicon-text-width"></span> glyphicon-text-width</li>
- <li><span class="glyphicon glyphicon-align-left"></span> glyphicon-align-left</li>
- <li><span class="glyphicon glyphicon-align-center"></span> glyphicon-align-center</li>
- <li><span class="glyphicon glyphicon-align-right"></span> glyphicon-align-right</li>
- <li><span class="glyphicon glyphicon-align-justify"></span> glyphicon-align-justify</li>
- <li><span class="glyphicon glyphicon-list"></span> glyphicon-list</li>
-
- <li><span class="glyphicon glyphicon-indent-left"></span> glyphicon-indent-left</li>
- <li><span class="glyphicon glyphicon-indent-right"></span> glyphicon-indent-right</li>
- <li><span class="glyphicon glyphicon-facetime-video"></span> glyphicon-facetime-video</li>
- <li><span class="glyphicon glyphicon-picture"></span> glyphicon-picture</li>
- <li><span class="glyphicon glyphicon-pencil"></span> glyphicon-pencil</li>
- <li><span class="glyphicon glyphicon-map-marker"></span> glyphicon-map-marker</li>
- <li><span class="glyphicon glyphicon-adjust"></span> glyphicon-adjust</li>
- <li><span class="glyphicon glyphicon-tint"></span> glyphicon-tint</li>
- <li><span class="glyphicon glyphicon-edit"></span> glyphicon-edit</li>
- <li><span class="glyphicon glyphicon-share"></span> glyphicon-share</li>
- <li><span class="glyphicon glyphicon-check"></span> glyphicon-check</li>
- <li><span class="glyphicon glyphicon-move"></span> glyphicon-move</li>
- <li><span class="glyphicon glyphicon-step-backward"></span> glyphicon-step-backward</li>
- <li><span class="glyphicon glyphicon-fast-backward"></span> glyphicon-fast-backward</li>
- <li><span class="glyphicon glyphicon-backward"></span> glyphicon-backward</li>
- <li><span class="glyphicon glyphicon-play"></span> glyphicon-play</li>
- <li><span class="glyphicon glyphicon-pause"></span> glyphicon-pause</li>
- <li><span class="glyphicon glyphicon-stop"></span> glyphicon-stop</li>
- <li><span class="glyphicon glyphicon-forward"></span> glyphicon-forward</li>
- <li><span class="glyphicon glyphicon-fast-forward"></span> glyphicon-fast-forward</li>
- <li><span class="glyphicon glyphicon-step-forward"></span> glyphicon-step-forward</li>
- <li><span class="glyphicon glyphicon-eject"></span> glyphicon-eject</li>
- <li><span class="glyphicon glyphicon-chevron-left"></span> glyphicon-chevron-left</li>
- <li><span class="glyphicon glyphicon-chevron-right"></span> glyphicon-chevron-right</li>
- <li><span class="glyphicon glyphicon-plus-sign"></span> glyphicon-plus-sign</li>
- <li><span class="glyphicon glyphicon-minus-sign"></span> glyphicon-minus-sign</li>
- <li><span class="glyphicon glyphicon-remove-sign"></span> glyphicon-remove-sign</li>
- <li><span class="glyphicon glyphicon-ok-sign"></span> glyphicon-ok-sign</li>
-
- <li><span class="glyphicon glyphicon-question-sign"></span> glyphicon-question-sign</li>
- <li><span class="glyphicon glyphicon-info-sign"></span> glyphicon-info-sign</li>
- <li><span class="glyphicon glyphicon-screenshot"></span> glyphicon-screenshot</li>
- <li><span class="glyphicon glyphicon-remove-circle"></span> glyphicon-remove-circle</li>
- <li><span class="glyphicon glyphicon-ok-circle"></span> glyphicon-ok-circle</li>
- <li><span class="glyphicon glyphicon-ban-circle"></span> glyphicon-ban-circle</li>
- <li><span class="glyphicon glyphicon-arrow-left"></span> glyphicon-arrow-left</li>
- <li><span class="glyphicon glyphicon-arrow-right"></span> glyphicon-arrow-right</li>
- <li><span class="glyphicon glyphicon-arrow-up"></span> glyphicon-arrow-up</li>
- <li><span class="glyphicon glyphicon-arrow-down"></span> glyphicon-arrow-down</li>
- <li><span class="glyphicon glyphicon-share-alt"></span> glyphicon-share-alt</li>
- <li><span class="glyphicon glyphicon-resize-full"></span> glyphicon-resize-full</li>
- <li><span class="glyphicon glyphicon-resize-small"></span> glyphicon-resize-small</li>
- <li><span class="glyphicon glyphicon-plus"></span> glyphicon-plus</li>
- <li><span class="glyphicon glyphicon-minus"></span> glyphicon-minus</li>
- <li><span class="glyphicon glyphicon-asterisk"></span> glyphicon-asterisk</li>
- <li><span class="glyphicon glyphicon-exclamation-sign"></span> glyphicon-exclamation-sign</li>
- <li><span class="glyphicon glyphicon-gift"></span> glyphicon-gift</li>
- <li><span class="glyphicon glyphicon-leaf"></span> glyphicon-leaf</li>
- <li><span class="glyphicon glyphicon-fire"></span> glyphicon-fire</li>
- <li><span class="glyphicon glyphicon-eye-open"></span> glyphicon-eye-open</li>
- <li><span class="glyphicon glyphicon-eye-close"></span> glyphicon-eye-close</li>
- <li><span class="glyphicon glyphicon-warning-sign"></span> glyphicon-warning-sign</li>
- <li><span class="glyphicon glyphicon-plane"></span> glyphicon-plane</li>
- <li><span class="glyphicon glyphicon-calendar"></span> glyphicon-calendar</li>
- <li><span class="glyphicon glyphicon-random"></span> glyphicon-random</li>
- <li><span class="glyphicon glyphicon-comment"></span> glyphicon-comment</li>
- <li><span class="glyphicon glyphicon-magnet"></span> glyphicon-magnet</li>
-
- <li><span class="glyphicon glyphicon-chevron-up"></span> glyphicon-chevron-up</li>
- <li><span class="glyphicon glyphicon-chevron-down"></span> glyphicon-chevron-down</li>
- <li><span class="glyphicon glyphicon-retweet"></span> glyphicon-retweet</li>
- <li><span class="glyphicon glyphicon-shopping-cart"></span> glyphicon-shopping-cart</li>
- <li><span class="glyphicon glyphicon-folder-close"></span> glyphicon-folder-close</li>
- <li><span class="glyphicon glyphicon-folder-open"></span> glyphicon-folder-open</li>
- <li><span class="glyphicon glyphicon-resize-vertical"></span> glyphicon-resize-vertical</li>
- <li><span class="glyphicon glyphicon-resize-horizontal"></span> glyphicon-resize-horizontal</li>
- <li><span class="glyphicon glyphicon-hdd"></span> glyphicon-hdd</li>
- <li><span class="glyphicon glyphicon-bullhorn"></span> glyphicon-bullhorn</li>
- <li><span class="glyphicon glyphicon-bell"></span> glyphicon-bell</li>
- <li><span class="glyphicon glyphicon-certificate"></span> glyphicon-certificate</li>
- <li><span class="glyphicon glyphicon-thumbs-up"></span> glyphicon-thumbs-up</li>
- <li><span class="glyphicon glyphicon-thumbs-down"></span> glyphicon-thumbs-down</li>
- <li><span class="glyphicon glyphicon-hand-right"></span> glyphicon-hand-right</li>
- <li><span class="glyphicon glyphicon-hand-left"></span> glyphicon-hand-left</li>
- <li><span class="glyphicon glyphicon-hand-up"></span> glyphicon-hand-up</li>
- <li><span class="glyphicon glyphicon-hand-down"></span> glyphicon-hand-down</li>
- <li><span class="glyphicon glyphicon-circle-arrow-right"></span> glyphicon-circle-arrow-right</li>
- <li><span class="glyphicon glyphicon-circle-arrow-left"></span> glyphicon-circle-arrow-left</li>
- <li><span class="glyphicon glyphicon-circle-arrow-up"></span> glyphicon-circle-arrow-up</li>
- <li><span class="glyphicon glyphicon-circle-arrow-down"></span> glyphicon-circle-arrow-down</li>
- <li><span class="glyphicon glyphicon-globe"></span> glyphicon-globe</li>
- <li><span class="glyphicon glyphicon-wrench"></span> glyphicon-wrench</li>
- <li><span class="glyphicon glyphicon-tasks"></span> glyphicon-tasks</li>
- <li><span class="glyphicon glyphicon-filter"></span> glyphicon-filter</li>
- <li><span class="glyphicon glyphicon-briefcase"></span> glyphicon-briefcase</li>
- <li><span class="glyphicon glyphicon-fullscreen"></span> glyphicon-fullscreen</li>
-
- <li><span class="glyphicon glyphicon-dashboard"></span> glyphicon-dashboard</li>
- <li><span class="glyphicon glyphicon-paperclip"></span> glyphicon-paperclip</li>
- <li><span class="glyphicon glyphicon-heart-empty"></span> glyphicon-heart-empty</li>
- <li><span class="glyphicon glyphicon-link"></span> glyphicon-link</li>
- <li><span class="glyphicon glyphicon-phone"></span> glyphicon-phone</li>
- <li><span class="glyphicon glyphicon-pushpin"></span> glyphicon-pushpin</li>
- <li><span class="glyphicon glyphicon-euro"></span> glyphicon-euro</li>
- <li><span class="glyphicon glyphicon-usd"></span> glyphicon-usd</li>
- <li><span class="glyphicon glyphicon-gbp"></span> glyphicon-gbp</li>
- <li><span class="glyphicon glyphicon-sort"></span> glyphicon-sort</li>
- <li><span class="glyphicon glyphicon-sort-by-alphabet"></span> glyphicon-sort-by-alphabet</li>
- <li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> glyphicon-sort-by-alphabet-alt</li>
- <li><span class="glyphicon glyphicon-sort-by-order"></span> glyphicon-sort-by-order</li>
- <li><span class="glyphicon glyphicon-sort-by-order-alt"></span> glyphicon-sort-by-order-alt</li>
- <li><span class="glyphicon glyphicon-sort-by-attributes"></span> glyphicon-sort-by-attributes</li>
- <li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> glyphicon-sort-by-attributes-alt</li>
- <li><span class="glyphicon glyphicon-unchecked"></span> glyphicon-unchecked</li>
- <li><span class="glyphicon glyphicon-expand"></span> glyphicon-expand</li>
- <li><span class="glyphicon glyphicon-collapse"></span> glyphicon-collapse</li>
- <li><span class="glyphicon glyphicon-collapse-top"></span> glyphicon-collapse-top</li>
-
- </ul>
-
- <h3>Glyphicons attribution</h3>
- <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
-
-
- <h2 id="icons-how-to">How to use</h2>
- <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
-{% highlight html %}
-<span class="glyphicon glyphicon-search"></span>
-{% endhighlight %}
- <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
- <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
-
-
- <h2 id="icons-examples">Icon examples</h2>
- <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
-
- <h4>Buttons</h4>
-
- <h5>Button group in a button toolbar</h5>
- <div class="bs-example">
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
- </div>
- </div>
- </div><!-- /bs-example -->
-{% highlight html %}
-<div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
- <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
- </div>
-</div>
-{% endhighlight %}
-
- <div class="bs-callout">
- <h4>Accessibility</h4>
- <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
- </div>
-
- <h5>Dropdown in a button group</h5>
- <div class="bs-example">
- <div class="btn-group">
- <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
- <li class="divider"></li>
- <li><a href="#">Make admin</a></li>
- </ul>
- </div>
- </div><!-- /bs-example -->
-{% highlight html %}
-<div class="btn-group">
- <a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
- <a class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
- <li class="divider"></li>
- <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
- </ul>
-</div>
-{% endhighlight %}
-
- <h5>Large button</h5>
- <div class="bs-example">
- <a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
- </div><!-- /bs-example -->
-{% highlight html %}
-<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
-{% endhighlight %}
-
- <h5>Small button</h5>
- <div class="bs-example">
- <a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
- </div><!-- /bs-example -->
-{% highlight html %}
-<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
-{% endhighlight %}
-
-
- <h4>Navigation</h4>
- <div class="bs-example">
- <ul class="nav nav-pills nav-stacked">
- <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
- </ul>
- </div><!-- /bs-example -->
-{% highlight html %}
-<ul class="nav nav-pills nav-stacked">
- <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
-</ul>
-{% endhighlight %}
-
- <h4>Form fields</h4>
- <form class="bs-example form-horizontal">
- <div class="control-group">
- <label class="control-label" for="inputIcon">Email address</label>
- <div class="controls">
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
- <input class="col-lg-2" id="inputIcon" type="text">
- </div>
- </div>
- </div>
- </form>
-{% highlight html %}
-<div class="control-group">
- <label class="control-label" for="inputIcon">Email address</label>
- <div class="controls">
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
- <input class="col-lg-2" id="inputIcon" type="text">
- </div>
- </div>
-</div>
-{% endhighlight %}
-
- </div>
-
-
--
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section" id="dropdowns">
projects / thirdparty / bootstrap.git / commitdiff
