diff options
| author | Mark Otto <[email protected]> | 2013-06-27 19:23:55 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-06-27 19:23:55 -0700 |
| commit | 2af67238a4ce5e85e1ba9c83d3af3b0c13f811cd (patch) | |
| tree | 419af19eb4673701ae74882716cf42d6f654c3f8 /docs/components.html | |
| parent | b06ec345ce5d84d54575bc4a127893786e95be8a (diff) | |
| parent | 8cd5d0be71f51a857848b6c28b3f97dbbb838dee (diff) | |
| download | bootstrap-2af67238a4ce5e85e1ba9c83d3af3b0c13f811cd.tar.xz bootstrap-2af67238a4ce5e85e1ba9c83d3af3b0c13f811cd.zip | |
Merge pull request #8332 from twitter/bs3_remove_icons
BS3: Remove Glyphicons
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 323 |
1 files changed, 4 insertions, 319 deletions
diff --git a/docs/components.html b/docs/components.html index 7768fccf3..071e546dc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -6,321 +6,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na --- - <!-- 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"> @@ -558,10 +243,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <div class="bs-example"> <div class="btn-group-vertical"> - <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button> - <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button> - <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button> - <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-justify"></i></button> + <button type="button" class="btn btn-default">Button</button> + <button type="button" class="btn btn-default">Button</button> + <button type="button" class="btn btn-default">Button</button> + <button type="button" class="btn btn-default">Button</button> </div> </div> {% highlight html %} |
