For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
<span class="glyphicons glyph-glass"></span>
<a href="#" class="social social-ios"></a>
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Buttons
Button group in a button toolbar
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><span class="glyphicons glyph-align-left"></span></a>
<a class="btn" href="#"><span class="glyphicons glyph-align-center"></span></a>
<a class="btn" href="#"><span class="glyphicons glyph-align-right"></span></a>
<a class="btn" href="#"><span class="glyphicons glyph-justify"></span></a>
</div>
</div>
Dropdown in a button group
<div class="btn-group">
<a class="btn btn-primary" href="#"><span class="glyphicons glyph-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="glyphicons glyph-pencil"></span> Edit</a></li>
<li><a href="#"><span class="glyphicons glyph-bin"></span> Delete</a></li>
<li><a href="#"><span class="glyphicons glyph-ban"></span> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><span class="i"></span> Make admin</a></li>
</ul>
</div>
Button sizes
<a class="btn btn-large" href="#"><span class="glyphicons glyph-star"></span> Star</a>
<a class="btn btn-small" href="#"><span class="glyphicons glyph-star"></span> Star</a>
<a class="btn btn-mini" href="#"><span class="glyphicons glyph-star"></span> Star</a>
Navigation
<ul class="nav nav-list">
<li class="active"><a href="#"><span class="glyphicons glyph-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicons glyph-book"></span> Library</a></li>
<li><a href="#"><span class="glyphicons glyph-pencil"></span> Applications</a></li>
<li><a href="#"><span class="glyphicons glyph-music"></span> Misc</a></li>
</ul>