Icons
Icons Graciously provided by Glyphicons
Built as a sprite
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.
How to use
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.
Use cases
Icons are great, but where would one use them? Here are a few ideas:
- As visuals for your sidebar navigation
- For a purely icon-driven navigation
- For buttons to help convey the meaning of an action
- With links to share context on a user's destination
Essentially, anywhere you can put an <i> tag, you can put an icon.
Examples
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
More Icons Icon sets from the Opa library
Icon sets
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 Sets
Default icon classes .icon or .icon32 are best suitable for white and light backgrounds.
16x16 pixels icon set
Set .icon class for 16x16 pixels icon followed by a class corresponding to the chosen image.
<span class="icon icon-home"/>
32x32 pixels icon set
Set .icon32 class for 32x32 pixels icon followed by a class corresponding to the chosen image.
<span class="icon32 icon-user"/>
Special class for the whole section
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
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.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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
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.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>
Black Icon Sets
The .icon-black class could be used for the icons on light and middle gray backgrounds.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>
White Icon Sets
The .icon-white class should be used for the icons on vivid and dark backgrounds.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>
Blue Icon Sets
The .icon-blue class could be used for the icons on light or dark backgrounds.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>
Green Icon Sets
The .icon-green class could be used for the icons on light or dark backgrounds.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>
Red Icon Sets
The .icon-red class could be used for the icons on light or dark backgrounds.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>
Orange Icon Sets
The .icon-orange class could be used for the icons on light or dark backgrounds.
16x16 pixels icon set
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"/>
32x32 pixels icon set
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"/>
Special class for the whole section
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>