mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-26 21:39:08 +02:00
Code Issues Releases Wiki Activity

removing glyphicons images, swapping in new icon font with new classes

Browse Source
This commit is contained in:
Mark Otto
2012-11-02 01:20:06 -07:00
parent d0c75bbc83
commit 72198a59c0
25 changed files with 1435 additions and 903 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
docs/base-css.html
View File

@@ -86,13 +86,13 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="icon-chevron-right"></i> Code</a></li>
<li><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>
<li><a href="#forms"><i class="icon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="icon-chevron-right"></i> Buttons</a></li>
<li><a href="#images"><i class="icon-chevron-right"></i> Images</a></li>
<li><a href="#icons"><i class="icon-chevron-right"></i> Icons by Glyphicons</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li>
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
<li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li>
</ul>
</div>
<div class="span9">
@@ -1773,177 +1773,197 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
================================================== -->
<section id="icons">
<div class="page-header">
<h1>Icons <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
<h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div>
<h2>Icon glyphs</h2>
<p>140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.</p>
<h2>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><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li>
<li><i class="icon-search"></i> icon-search</li>
<li><i class="icon-envelope"></i> icon-envelope</li>
<li><i class="icon-heart"></i> icon-heart</li>
<li><i class="icon-star"></i> icon-star</li>
<li><i class="icon-star-empty"></i> icon-star-empty</li>
<li><i class="icon-user"></i> icon-user</li>
<li><i class="icon-film"></i> icon-film</li>
<li><i class="icon-th-large"></i> icon-th-large</li>
<li><i class="icon-th"></i> icon-th</li>
<li><i class="icon-th-list"></i> icon-th-list</li>
<li><i class="icon-ok"></i> icon-ok</li>
<li><i class="icon-remove"></i> icon-remove</li>
<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
<li><i class="icon-off"></i> icon-off</li>
<li><i class="icon-signal"></i> icon-signal</li>
<li><i class="icon-cog"></i> icon-cog</li>
<li><i class="icon-trash"></i> icon-trash</li>
<li><i class="icon-home"></i> icon-home</li>
<li><i class="icon-file"></i> icon-file</li>
<li><i class="icon-time"></i> icon-time</li>
<li><i class="icon-road"></i> icon-road</li>
<li><i class="icon-download-alt"></i> icon-download-alt</li>
<li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li>
<li><i class="glyphicon-glass"></i> glyphicon-glass</li>
<li><i class="glyphicon-music"></i> glyphicon-music</li>
<li><i class="glyphicon-search"></i> glyphicon-search</li>
<li><i class="glyphicon-envelope"></i> glyphicon-envelope</li>
<li><i class="glyphicon-heart"></i> glyphicon-heart</li>
<li><i class="glyphicon-star"></i> glyphicon-star</li>
<li><i class="glyphicon-star-empty"></i> glyphicon-star-empty</li>
<li><i class="glyphicon-user"></i> glyphicon-user</li>
<li><i class="glyphicon-film"></i> glyphicon-film</li>
<li><i class="glyphicon-th-large"></i> glyphicon-th-large</li>
<li><i class="glyphicon-th"></i> glyphicon-th</li>
<li><i class="glyphicon-th-list"></i> glyphicon-th-list</li>
<li><i class="glyphicon-ok"></i> glyphicon-ok</li>
<li><i class="glyphicon-remove"></i> glyphicon-remove</li>
<li><i class="glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
<li><i class="glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
<li><i class="glyphicon-off"></i> glyphicon-off</li>
<li><i class="glyphicon-signal"></i> glyphicon-signal</li>
<li><i class="glyphicon-cog"></i> glyphicon-cog</li>
<li><i class="glyphicon-trash"></i> glyphicon-trash</li>
<li><i class="glyphicon-home"></i> glyphicon-home</li>
<li><i class="glyphicon-file"></i> glyphicon-file</li>
<li><i class="glyphicon-time"></i> glyphicon-time</li>
<li><i class="glyphicon-road"></i> glyphicon-road</li>
<li><i class="glyphicon-download-alt"></i> glyphicon-download-alt</li>
<li><i class="glyphicon-download"></i> glyphicon-download</li>
<li><i class="glyphicon-upload"></i> glyphicon-upload</li>
<li><i class="glyphicon-inbox"></i> glyphicon-inbox</li>
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
<li><i class="icon-refresh"></i> icon-refresh</li>
<li><i class="icon-list-alt"></i> icon-list-alt</li>
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
<li><i class="icon-qrcode"></i> icon-qrcode</li>
<li><i class="icon-barcode"></i> icon-barcode</li>
<li><i class="icon-tag"></i> icon-tag</li>
<li><i class="icon-tags"></i> icon-tags</li>
<li><i class="icon-book"></i> icon-book</li>
<li><i class="icon-bookmark"></i> icon-bookmark</li>
<li><i class="icon-print"></i> icon-print</li>
<li><i class="icon-camera"></i> icon-camera</li>
<li><i class="icon-font"></i> icon-font</li>
<li><i class="icon-bold"></i> icon-bold</li>
<li><i class="icon-italic"></i> icon-italic</li>
<li><i class="icon-text-height"></i> icon-text-height</li>
<li><i class="icon-text-width"></i> icon-text-width</li>
<li><i class="icon-align-left"></i> icon-align-left</li>
<li><i class="icon-align-center"></i> icon-align-center</li>
<li><i class="icon-align-right"></i> icon-align-right</li>
<li><i class="icon-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li>
<li><i class="glyphicon-play-circle"></i> glyphicon-play-circle</li>
<li><i class="glyphicon-repeat"></i> glyphicon-repeat</li>
<li><i class="glyphicon-refresh"></i> glyphicon-refresh</li>
<li><i class="glyphicon-list-alt"></i> glyphicon-list-alt</li>
<li><i class="glyphicon-lock"></i> glyphicon-lock</li>
<li><i class="glyphicon-flag"></i> glyphicon-flag</li>
<li><i class="glyphicon-headphones"></i> glyphicon-headphones</li>
<li><i class="glyphicon-volume-off"></i> glyphicon-volume-off</li>
<li><i class="glyphicon-volume-down"></i> glyphicon-volume-down</li>
<li><i class="glyphicon-volume-up"></i> glyphicon-volume-up</li>
<li><i class="glyphicon-qrcode"></i> glyphicon-qrcode</li>
<li><i class="glyphicon-barcode"></i> glyphicon-barcode</li>
<li><i class="glyphicon-tag"></i> glyphicon-tag</li>
<li><i class="glyphicon-tags"></i> glyphicon-tags</li>
<li><i class="glyphicon-book"></i> glyphicon-book</li>
<li><i class="glyphicon-bookmark"></i> glyphicon-bookmark</li>
<li><i class="glyphicon-print"></i> glyphicon-print</li>
<li><i class="glyphicon-camera"></i> glyphicon-camera</li>
<li><i class="glyphicon-font"></i> glyphicon-font</li>
<li><i class="glyphicon-bold"></i> glyphicon-bold</li>
<li><i class="glyphicon-italic"></i> glyphicon-italic</li>
<li><i class="glyphicon-text-height"></i> glyphicon-text-height</li>
<li><i class="glyphicon-text-width"></i> glyphicon-text-width</li>
<li><i class="glyphicon-align-left"></i> glyphicon-align-left</li>
<li><i class="glyphicon-align-center"></i> glyphicon-align-center</li>
<li><i class="glyphicon-align-right"></i> glyphicon-align-right</li>
<li><i class="glyphicon-align-justify"></i> glyphicon-align-justify</li>
<li><i class="glyphicon-list"></i> glyphicon-list</li>
<li><i class="icon-indent-left"></i> icon-indent-left</li>
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
<li><i class="icon-picture"></i> icon-picture</li>
<li><i class="icon-pencil"></i> icon-pencil</li>
<li><i class="icon-map-marker"></i> icon-map-marker</li>
<li><i class="icon-adjust"></i> icon-adjust</li>
<li><i class="icon-tint"></i> icon-tint</li>
<li><i class="icon-edit"></i> icon-edit</li>
<li><i class="icon-share"></i> icon-share</li>
<li><i class="icon-check"></i> icon-check</li>
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
<li><i class="icon-stop"></i> icon-stop</li>
<li><i class="icon-forward"></i> icon-forward</li>
<li><i class="icon-fast-forward"></i> icon-fast-forward</li>
<li><i class="icon-step-forward"></i> icon-step-forward</li>
<li><i class="icon-eject"></i> icon-eject</li>
<li><i class="icon-chevron-left"></i> icon-chevron-left</li>
<li><i class="icon-chevron-right"></i> icon-chevron-right</li>
<li><i class="icon-plus-sign"></i> icon-plus-sign</li>
<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
<li><i class="glyphicon-indent-left"></i> glyphicon-indent-left</li>
<li><i class="glyphicon-indent-right"></i> glyphicon-indent-right</li>
<li><i class="glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
<li><i class="glyphicon-picture"></i> glyphicon-picture</li>
<li><i class="glyphicon-pencil"></i> glyphicon-pencil</li>
<li><i class="glyphicon-map-marker"></i> glyphicon-map-marker</li>
<li><i class="glyphicon-adjust"></i> glyphicon-adjust</li>
<li><i class="glyphicon-tint"></i> glyphicon-tint</li>
<li><i class="glyphicon-edit"></i> glyphicon-edit</li>
<li><i class="glyphicon-share"></i> glyphicon-share</li>
<li><i class="glyphicon-check"></i> glyphicon-check</li>
<li><i class="glyphicon-move"></i> glyphicon-move</li>
<li><i class="glyphicon-step-backward"></i> glyphicon-step-backward</li>
<li><i class="glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
<li><i class="glyphicon-backward"></i> glyphicon-backward</li>
<li><i class="glyphicon-play"></i> glyphicon-play</li>
<li><i class="glyphicon-pause"></i> glyphicon-pause</li>
<li><i class="glyphicon-stop"></i> glyphicon-stop</li>
<li><i class="glyphicon-forward"></i> glyphicon-forward</li>
<li><i class="glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
<li><i class="glyphicon-step-forward"></i> glyphicon-step-forward</li>
<li><i class="glyphicon-eject"></i> glyphicon-eject</li>
<li><i class="glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
<li><i class="glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
<li><i class="glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
<li><i class="glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
<li><i class="glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
<li><i class="glyphicon-ok-sign"></i> glyphicon-ok-sign</li>
<li><i class="icon-question-sign"></i> icon-question-sign</li>
<li><i class="icon-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li>
<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
<li><i class="icon-arrow-down"></i> icon-arrow-down</li>
<li><i class="icon-share-alt"></i> icon-share-alt</li>
<li><i class="icon-resize-full"></i> icon-resize-full</li>
<li><i class="icon-resize-small"></i> icon-resize-small</li>
<li><i class="icon-plus"></i> icon-plus</li>
<li><i class="icon-minus"></i> icon-minus</li>
<li><i class="icon-asterisk"></i> icon-asterisk</li>
<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
<li><i class="icon-gift"></i> icon-gift</li>
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
<li><i class="icon-calendar"></i> icon-calendar</li>
<li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li>
<li><i class="glyphicon-question-sign"></i> glyphicon-question-sign</li>
<li><i class="glyphicon-info-sign"></i> glyphicon-info-sign</li>
<li><i class="glyphicon-screenshot"></i> glyphicon-screenshot</li>
<li><i class="glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
<li><i class="glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
<li><i class="glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
<li><i class="glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
<li><i class="glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
<li><i class="glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
<li><i class="glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
<li><i class="glyphicon-share-alt"></i> glyphicon-share-alt</li>
<li><i class="glyphicon-resize-full"></i> glyphicon-resize-full</li>
<li><i class="glyphicon-resize-small"></i> glyphicon-resize-small</li>
<li><i class="glyphicon-plus"></i> glyphicon-plus</li>
<li><i class="glyphicon-minus"></i> glyphicon-minus</li>
<li><i class="glyphicon-asterisk"></i> glyphicon-asterisk</li>
<li><i class="glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
<li><i class="glyphicon-gift"></i> glyphicon-gift</li>
<li><i class="glyphicon-leaf"></i> glyphicon-leaf</li>
<li><i class="glyphicon-fire"></i> glyphicon-fire</li>
<li><i class="glyphicon-eye-open"></i> glyphicon-eye-open</li>
<li><i class="glyphicon-eye-close"></i> glyphicon-eye-close</li>
<li><i class="glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
<li><i class="glyphicon-plane"></i> glyphicon-plane</li>
<li><i class="glyphicon-calendar"></i> glyphicon-calendar</li>
<li><i class="glyphicon-random"></i> glyphicon-random</li>
<li><i class="glyphicon-comment"></i> glyphicon-comment</li>
<li><i class="glyphicon-magnet"></i> glyphicon-magnet</li>
<li><i class="glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
<li><i class="glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
<li><i class="glyphicon-retweet"></i> glyphicon-retweet</li>
<li><i class="glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
<li><i class="glyphicon-folder-close"></i> glyphicon-folder-close</li>
<li><i class="glyphicon-folder-open"></i> glyphicon-folder-open</li>
<li><i class="glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
<li><i class="glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
<li><i class="glyphicon-hdd"></i> glyphicon-hdd</li>
<li><i class="glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
<li><i class="glyphicon-bell"></i> glyphicon-bell</li>
<li><i class="glyphicon-certificate"></i> glyphicon-certificate</li>
<li><i class="glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
<li><i class="glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
<li><i class="glyphicon-hand-right"></i> glyphicon-hand-right</li>
<li><i class="glyphicon-hand-left"></i> glyphicon-hand-left</li>
<li><i class="glyphicon-hand-up"></i> glyphicon-hand-up</li>
<li><i class="glyphicon-hand-down"></i> glyphicon-hand-down</li>
<li><i class="glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
<li><i class="glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
<li><i class="glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
<li><i class="glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
<li><i class="glyphicon-globe"></i> glyphicon-globe</li>
<li><i class="glyphicon-wrench"></i> glyphicon-wrench</li>
<li><i class="glyphicon-tasks"></i> glyphicon-tasks</li>
<li><i class="glyphicon-filter"></i> glyphicon-filter</li>
<li><i class="glyphicon-briefcase"></i> glyphicon-briefcase</li>
<li><i class="glyphicon-fullscreen"></i> glyphicon-fullscreen</li>
<li><i class="glyphicon-dashboard"></i> glyphicon-dashboard</li>
<li><i class="glyphicon-paperclip"></i> glyphicon-paperclip</li>
<li><i class="glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
<li><i class="glyphicon-link"></i> glyphicon-link</li>
<li><i class="glyphicon-phone"></i> glyphicon-phone</li>
<li><i class="glyphicon-pushpin"></i> glyphicon-pushpin</li>
<li><i class="glyphicon-euro"></i> glyphicon-euro</li>
<li><i class="glyphicon-usd"></i> glyphicon-usd</li>
<li><i class="glyphicon-gbp"></i> glyphicon-gbp</li>
<li><i class="glyphicon-sort"></i> glyphicon-sort</li>
<li><i class="glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
<li><i class="glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
<li><i class="glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
<li><i class="glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
<li><i class="glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
<li><i class="glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
<li><i class="glyphicon-unchecked"></i> glyphicon-unchecked</li>
<li><i class="glyphicon-expand"></i> glyphicon-expand</li>
<li><i class="glyphicon-collapse"></i> glyphicon-collapse</li>
<li><i class="glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li>
<li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
<li><i class="icon-folder-close"></i> icon-folder-close</li>
<li><i class="icon-folder-open"></i> icon-folder-open</li>
<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
<li><i class="icon-hdd"></i> icon-hdd</li>
<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
<li><i class="icon-bell"></i> icon-bell</li>
<li><i class="icon-certificate"></i> icon-certificate</li>
<li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
<li><i class="icon-hand-right"></i> icon-hand-right</li>
<li><i class="icon-hand-left"></i> icon-hand-left</li>
<li><i class="icon-hand-up"></i> icon-hand-up</li>
<li><i class="icon-hand-down"></i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
<li><i class="icon-globe"></i> icon-globe</li>
<li><i class="icon-wrench"></i> icon-wrench</li>
<li><i class="icon-tasks"></i> icon-tasks</li>
<li><i class="icon-filter"></i> icon-filter</li>
<li><i class="icon-briefcase"></i> icon-briefcase</li>
<li><i class="icon-fullscreen"></i> icon-fullscreen</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 creators 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>
<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>
<hr class="bs-docs-separator">
<h2>How to use</h2>
<p>All icons require an <code>&lt;i&gt;</code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:</p>
<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>
<pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt;
</pre>
<p>There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.</p>
<pre class="prettyprint linenums">
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
&lt;i class="glyphicon-search"&gt;&lt;/i&gt;
</pre>
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.
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>
@@ -1959,10 +1979,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
<a class="btn" href="#"><i class="glyphicon-align-left"></i></a>
<a class="btn" href="#"><i class="glyphicon-align-center"></i></a>
<a class="btn" href="#"><i class="glyphicon-align-right"></i></a>
<a class="btn" href="#"><i class="glyphicon-align-justify"></i></a>
</div>
</div>
</div>
@@ -1970,10 +1990,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;div class="btn-toolbar"&gt;
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
@@ -1981,12 +2001,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h5>Dropdown in a button group</h5>
<div class="bs-docs-example">
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> 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="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
<li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
@@ -1994,12 +2014,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;
&lt;a class="btn btn-primary" href="#"&gt;&lt;i class="glyphicon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;
&lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
@@ -2008,10 +2028,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h5>Small button</h5>
<div class="bs-docs-example">
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
</div>
<pre class="prettyprint linenums">
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="glyphicon-star"&gt;&lt;/i&gt;&lt;/a&gt;
</pre>
@@ -2019,18 +2039,18 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<div class="bs-docs-example">
<div class="well" style="padding: 8px 0; margin-bottom: 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
<li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Misc&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
@@ -2041,7 +2061,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
<span class="add-on"><i class="glyphicon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
@@ -2051,7 +2071,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;span class="add-on"&gt;&lt;i class="glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;input class="span2" id="inputIcon" type="text"&gt;
&lt;/div&gt;
&lt;/div&gt;