@@ -1341,6 +1341,9 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1341,6 +1341,9 @@ For example, <code>section</code> should be wrapped as inline.
<divclass="page-header">
<divclass="page-header">
<h1>Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small></h1>
<h1>Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small></h1>
</div>
</div>
<h2>Icon glyphs</h2>
<p>140 icons in sprite form, available in dark gray (default) and white, provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a>.</p>
<divclass="row">
<divclass="row">
<divclass="span2">
<divclass="span2">
<ulclass="the-icons">
<ulclass="the-icons">
...
@@ -1504,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1504,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.
</div>
</div>
</div>
</div>
<br>
<hrclass="bs-docs-separator">
<h3>Built as a sprite</h3>
<p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p>
<p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p>
<p><ahref="http://glyphicons.com"target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p>
<h3>How to use</h3>
<h2>How to use</h2>
<p>Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
<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>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<i class="icon-search"></i>
<i class="icon-search"></i>
</pre>
</pre>
...
@@ -1521,66 +1520,55 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1521,66 +1520,55 @@ For example, <code>section</code> should be wrapped as inline.
<p>There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>
<p>
<spanclass="label label-info">Heads up!</span>
<spanclass="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 <code><i></code> tag for proper spacing.
</p>
</p>
<h3>Use cases</h3>
<p>Icons are great, but where would one use them? Here are a few ideas:</p>
<hrclass="bs-docs-separator">
<ul>
<li>As visuals for your sidebar navigation</li>
<li>For a purely icon-driven navigation</li>
<li>For buttons to help convey the meaning of an action</li>
<li>With links to share context on a user's destination</li>
</ul>
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p>
<h3>Examples</h3>
<h2>Icon examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<h1>{{_i}}Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small>{{/i}}</h1>
<h1>{{_i}}Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div>
</div>
<h2>{{_i}}Icon glyphs{{/i}}</h2>
<p>{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a>.{{/i}}</p>
<divclass="row">
<divclass="row">
<divclass="span2">
<divclass="span2">
<ulclass="the-icons">
<ulclass="the-icons">
...
@@ -1435,16 +1438,12 @@
...
@@ -1435,16 +1438,12 @@
</div>
</div>
</div>
</div>
<br>
<hrclass="bs-docs-separator">
<h3>{{_i}}Built as a sprite{{/i}}</h3>
<p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}</p>
<p>{{_i}}All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p>
<p>{{_i}}<ahref="http://glyphicons.com"target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}</p>
<h3>{{_i}}How to use{{/i}}</h3>
<h2>{{_i}}How to use{{/i}}</h2>
<p>{{_i}}Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}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:{{/i}}</p>
<p>{{_i}}There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
{{_i}}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.{{/i}}
{{_i}}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.{{/i}}
</p>
</p>
<h3>{{_i}}Use cases{{/i}}</h3>
<p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
<hrclass="bs-docs-separator">
<ul>
<li>{{_i}}As visuals for your sidebar navigation{{/i}}</li>
<li>{{_i}}For a purely icon-driven navigation{{/i}}</li>
<li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
<li>{{_i}}With links to share context on a user's destination{{/i}}</li>
</ul>
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.{{/i}}</p>
<h3>{{_i}}Examples{{/i}}</h3>
<h2>{{_i}}Icon examples{{/i}}</h2>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
