<li>For buttons to help convey the meaning of an action</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>
<li>With links to share context on a user's destination</li>
</ul>
</ul>
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:</p>
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p>
<preclass="prettyprint linenums">
<i class="icon"></i>
</pre>
</div>
</div>
</div>
</div>
<h3>Examples</h3>
<h3>Examples</h3>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<p>Use them in buttons - of all types and sizes.</p>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
<p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<i class="icon white search"></i>
<i class="icon white search"></i>
</pre>
</pre>
...
@@ -1427,18 +1427,15 @@
...
@@ -1427,18 +1427,15 @@
<li>{{_i}}For buttons to help convey the meaning of an action{{/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>
<li>{{_i}}With links to share context on a user's destination{{/i}}</li>
</ul>
</ul>
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:{{/i}}</p>
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.{{/i}}</p>
<preclass="prettyprint linenums">
<i class="icon"></i>
</pre>
</div>
</div>
</div>
</div>
<h3>{{_i}}Examples{{/i}}</h3>
<h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<p>{{_i}}Use them in buttons - of all types and sizes.{{/i}}</p>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
<p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
<p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
