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 background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
<i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
<i class="icon-search icon-white"></i>
There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
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.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an <i> tag, you can put an icon.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Default icon set has gray style suitable for white and light backgrounds, but a number of functional classes can be applied for different icon color styles.
These classes include a 5-color (blue, green, red, yellow and gray) .icon-color class, a black .icon-black class, a white .icon-white class, and a dark-gray .icon-darkgray class.
Default icon classes .icon or .icon32 are best suitable for white and light backgrounds.
Set .icon class for 16x16 pixels icon followed by a class corresponding to the chosen image.
<span class="icon icon-home"/>
Set .icon32 class for 32x32 pixels icon followed by a class corresponding to the chosen image.
<span class="icon32 icon-user"/>
To use gray icon set for the whole section set .icons-gray class on the parent element.
<div class="icons-gray"> <span class="icon icon-add"/> <span class="icon icon-remove"/> </div>
Dark-gray icon sets are used for default :hover effect.
The .icon-darkgray class should be used for the icons on light and middle gray backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-darkgray class for color and a class corresponding to the chosen image.
<span class="icon icon-darkgray icon-add"/>
Set .icon32 class for 32x32 pixels icon, then .icon-darkgray class for color and a class corresponding to the chosen image.
<span class="icon32 icon-darkgray icon-remove"/>
To use dark-gray icon set for the whole section set .icons-darkgray class on the parent element.
<div class="icons-darkgray"> <span class="icon icon-add"/> <span class="icon icon-remove"/> </div>
Color icon sets are used for default .active icon effect.
The .icon-color class should be used for the icons on white and light backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-color class for color and a class corresponding to the chosen image.
<span class="icon icon-color icon-triangle-n"/>
Set .icon32 class for 32x32 pixels icon, then .icon-color class for color and a class corresponding to the chosen image.
<span class="icon32 icon-color icon-triangle-s"/>
To use color icon set for the whole section set .icons-color
class on the parent element.
<div class="icons-color"> <span class="icon icon-triangle-n"/> <span class="icon icon-triangle-s"/> </div>
The .icon-black class could be used for the icons on light and middle gray backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-black class for color and a class corresponding to the chosen image.
<span class="icon icon-black icon-folder-open"/>
Set .icon32 class for 32x32 pixels icon, then .icon-black class for color and a class corresponding to the chosen image.
<span class="icon32 icon-black icon-folder-collapsed"/>
To use black icon set for the whole section set .icons-black
class on the parent element.
<div class="icons-black"> <span class="icon icon-folder-open"/> <span class="icon icon-folder-collapsed"/> </div>
The .icon-white class should be used for the icons on vivid and dark backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-white class for color and a class corresponding to the chosen image.
<span class="icon icon-white icon-bullet-on"/>
Set .icon32 class for 32x32 pixels icon, then .icon-white class for color and a class corresponding to the chosen image.
<span class="icon32 icon-white icon-bullet-off"/>
To use white icon set for the whole section set .icons-white class on the parent element.
<div class="icons-white"> <span class="icon icon-bullet-on"/> <span class="icon icon-bullet-off"/> </div>
The .icon-blue class could be used for the icons on light or dark backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-blue class for color and a class corresponding to the chosen image.
<span class="icon icon-blue icon-carat-1-n"/>
Set .icon32 class for 32x32 pixels icon, then .icon-blue class for color and a class corresponding to the chosen image.
<span class="icon32 icon-blue icon-carat-1-s"/>
To use blue icon set for the whole section set .icons-blue
class on the parent element.
<div class="icons-blue"> <span class="icon icon-carat-1-n"/> <span class="icon icon-carat-1-s"/> </div>
The .icon-green class could be used for the icons on light or dark backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-green class for color and a class corresponding to the chosen image.
<span class="icon icon-green icon-arrow-e"/>
Set .icon32 class for 32x32 pixels icon, then .icon-green class for color and a class corresponding to the chosen image.
<span class="icon32 icon-green icon-arrow-w"/>
To use green icon set for the whole section set .icons-green
class on the parent element.
<div class="icons-green"> <span class="icon icon-arrow-e"/> <span class="icon icon-arrow-w"/> </div>
The .icon-red class could be used for the icons on light or dark backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-red class for color and a class corresponding to the chosen image.
<span class="icon icon-red icon-arrowthick-ne"/>
Set .icon32 class for 32x32 pixels icon, then .icon-red class for color and a class corresponding to the chosen image.
<span class="icon32 icon-red icon-arrowthick-sw"/>
To use red icon set for the whole section set .icons-red
class on the parent element.
<div class="icons-red"> <span class="icon icon-arrowthick-ne"/> <span class="icon icon-arrowthick-sw"/> </div>
The .icon-orange class could be used for the icons on light or dark backgrounds.
Set .icon class for 16x16 pixels icon, then .icon-orange class for color and a class corresponding to the chosen image.
<span class="icon icon-orange icon-undo"/>
Set .icon32 class for 32x32 pixels icon, then .icon-orange class for color and a class corresponding to the chosen image.
<span class="icon32 icon-orange icon-redo"/>
To use orange icon set for the whole section set .icons-orange
class on the parent element.
<div class="icons-orange"> <span class="icon icon-undo"/> <span class="icon icon-redo"/> </div>