Icons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white.

• 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

How to use

All icons require an < i > tag with a unique class, prefixed with icon-. 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. 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.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar

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

Dropdown in a button group

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

Button sizes

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

Navigation

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