140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators 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 Glyphicons whenever practical.
All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:
<i>
icon-
<i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
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="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div> </div>
<div class="btn-group"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> 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="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="i"></i> Misc</a></li> </ul>
<div class="social-icons clearfix"> <a class="social-twitter" href="#">Twitter</a> <a class="social-dribbble" href="#">Dribbble</a> <a class="social-facebook" href="#">Facebook</a> <a class="social-envato" href="#">Envato</a> <a class="social-flickr" href="#">flickr</a> <a class="social-forrst" href="#">forrst</a> <a class="social-gplus" href="#">gplus</a> <a class="social-gplus2" href="#">gplus2</a> <a class="social-icloud" href="#">icloud</a> <a class="social-lastfm" href="#">lastfm</a> <a class="social-linkedin" href="#">linkedin</a> <a class="social-myspace" href="#">myspace</a> <a class="social-paypa" href="#">paypa</a> <a class="social-piacasa" href="#">piacasa</a> <a class="social-pinterest" href="#">pinterest</a> <a class="social-reedit" href="#">reedit</a> <a class="social-rss" href="#">rss</a> <a class="social-skype" href="#">skype</a> <a class="social-stumbleupon" href="#">stumbleupon</a> <a class="social-tumblr" href="#">tumblr</a> <a class="social-vimeo" href="#">vimeo</a> <a class="social-wordpress" href="#">wordpress</a> <a class="social-yahoo" href="#">yahoo</a> <a class="social-youtube" href="#">youtube</a> <a class="social-blogger" href="#">blogger</a> <a class="social-deviantart" href="#">deviantart</a> <a class="social-digg" href="#">digg</a> <a class="social-foursquare" href="#">foursquare</a> <a class="social-friendfeed" href="#">friendfeed</a> <a class="social-mail" href="#">mail</a> <a class="social-html5" href="#">html5</a> <a class="social-technorati" href="#">technorati</a> <a class="social-soundcloud" href="#">soundcloud</a> <a class="social-quora" href="#">quora</a> <a class="social-bebo" href="#">bebo</a> <a class="social-aim" href="#">aim</a> <a class="social-gosquared" href="#">gosquared</a> <a class="social-dropbox" href="#">dropbox</a> <a class="social-github" href="#">github</a> <a class="social-spotify" href="#">spotify</a> <a class="social-apple" href="#">apple</a></div>