## Icons

# Icons Graciously provided by Glyphicons

- icon-glass
- icon-music
- icon-search
- icon-envelope
- icon-heart
- icon-star
- icon-star-empty
- icon-user
- icon-film
- icon-th-large
- icon-th
- icon-th-list
- icon-ok
- icon-remove
- icon-zoom-in
- icon-zoom-out
- icon-off
- icon-signal
- icon-cog
- icon-trash
- icon-home
- icon-file
- icon-time
- icon-road
- icon-download-alt
- icon-download
- icon-upload
- icon-inbox
- icon-play-circle
- icon-repeat
- icon-refresh
- icon-list-alt
- icon-lock
- icon-flag
- icon-headphones

- icon-volume-off
- icon-volume-down
- icon-volume-up
- icon-qrcode
- icon-barcode
- icon-tag
- icon-tags
- icon-book
- icon-bookmark
- icon-print
- icon-camera
- icon-font
- icon-bold
- icon-italic
- icon-text-height
- icon-text-width
- icon-align-left
- icon-align-center
- icon-align-right
- icon-align-justify
- icon-list
- icon-indent-left
- icon-indent-right
- icon-facetime-video
- icon-picture
- icon-pencil
- icon-map-marker
- icon-adjust
- icon-tint
- icon-edit
- icon-share
- icon-check
- icon-move
- icon-step-backward
- icon-fast-backward

- icon-backward
- icon-play
- icon-pause
- icon-stop
- icon-forward
- icon-fast-forward
- icon-step-forward
- icon-eject
- icon-chevron-left
- icon-chevron-right
- icon-plus-sign
- icon-minus-sign
- icon-remove-sign
- icon-ok-sign
- icon-question-sign
- icon-info-sign
- icon-screenshot
- icon-remove-circle
- icon-ok-circle
- icon-ban-circle
- icon-arrow-left
- icon-arrow-right
- icon-arrow-up
- icon-arrow-down
- icon-share-alt
- icon-resize-full
- icon-resize-small
- icon-plus
- icon-minus
- icon-asterisk
- icon-exclamation-sign
- icon-gift
- icon-leaf
- icon-fire
- icon-eye-open

- icon-eye-close
- icon-warning-sign
- icon-plane
- icon-calendar
- icon-random
- icon-comment
- icon-magnet
- icon-chevron-up
- icon-chevron-down
- icon-retweet
- icon-shopping-cart
- icon-folder-close
- icon-folder-open
- icon-resize-vertical
- icon-resize-horizontal
- icon-hdd
- icon-bullhorn
- icon-bell
- icon-certificate
- icon-thumbs-up
- icon-thumbs-down
- icon-hand-right
- icon-hand-left
- icon-hand-up
- icon-hand-down
- icon-circle-arrow-right
- icon-circle-arrow-left
- icon-circle-arrow-up
- icon-circle-arrow-down
- icon-globe
- icon-wrench
- icon-tasks
- icon-filter
- icon-briefcase
- icon-fullscreen

### 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>

In dark themes (Cyborg and Slate) normal icons become white and icon-white become black.

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.

User

Refresh Checkout Delete

Comment Settings More Info

Email address

# 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.

Note: place your cursor on the chosen icon image to see its 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>

### Settings

Here settings can be configured...