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.
<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>
<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>
<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>
<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="i"></span> Misc</a></li> </ul>