diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 396 |
1 files changed, 208 insertions, 188 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 4a3e8459a..6522fff59 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -84,13 +84,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"> @@ -1764,177 +1764,197 @@ For example, <code><section></code> 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="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="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="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="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> + <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="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="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="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> + </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><i></code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:</p> -<pre class="prettyprint linenums"> -<i class="icon-search"></i> -</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> + <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"> -<i class="icon-search icon-white"></i> +<i class="glyphicon-search"></i> </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><i></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> @@ -1950,10 +1970,10 @@ For example, <code><section></code> 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> @@ -1961,10 +1981,10 @@ For example, <code><section></code> should be wrapped as inlin <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> </pre> @@ -1972,12 +1992,12 @@ For example, <code><section></code> 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> @@ -1985,12 +2005,12 @@ For example, <code><section></code> should be wrapped as inlin </div> <pre class="prettyprint linenums"> <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> @@ -1999,10 +2019,10 @@ For example, <code><section></code> 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"> -<a class="btn btn-small" href="#"><i class="icon-star"></i></a> +<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a> </pre> @@ -2010,18 +2030,18 @@ For example, <code><section></code> 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"> <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> </pre> @@ -2032,7 +2052,7 @@ For example, <code><section></code> 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> @@ -2042,7 +2062,7 @@ For example, <code><section></code> 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> + <span class="add-on"><i class="glyphicon-envelope"></i></span> <input class="span2" id="inputIcon" type="text"> </div> </div> |