List icon
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.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
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.
Get the code
<div class="row-fluid">
<div class="span3">
<ul class="the-icons">
<li><i class="icon-glass"> </i> icon-glass</li>
<li><i class="icon-music"> </i> icon-music</li>
<li><i class="icon-search"> </i> icon-search</li>
<li><i class="icon-envelope"> </i> icon-envelope</li>
<li><i class="icon-heart"> </i> icon-heart</li>
<li><i class="icon-star"> </i> icon-star</li>
<li><i class="icon-star-empty"> </i> icon-star-empty</li>
<li><i class="icon-user"> </i> icon-user</li>
<li><i class="icon-film"> </i> icon-film</li>
<li><i class="icon-th-large"> </i> icon-th-large</li>
<li><i class="icon-th"> </i> icon-th</li>
<li><i class="icon-th-list"> </i> icon-th-list</li>
<li><i class="icon-ok"> </i> icon-ok</li>
<li><i class="icon-remove"> </i> icon-remove</li>
<li><i class="icon-zoom-in"> </i> icon-zoom-in</li>
<li><i class="icon-zoom-out"> </i> icon-zoom-out</li>
<li><i class="icon-off"> </i> icon-off</li>
<li><i class="icon-signal"> </i> icon-signal</li>
<li><i class="icon-cog"> </i> icon-cog</li>
<li><i class="icon-trash"> </i> icon-trash</li>
<li><i class="icon-home"> </i> icon-home</li>
<li><i class="icon-file"> </i> icon-file</li>
<li><i class="icon-time"> </i> icon-time</li>
<li><i class="icon-road"> </i> icon-road</li>
<li><i class="icon-download-alt"> </i> icon-download-alt</li>
<li><i class="icon-download"> </i> icon-download</li>
<li><i class="icon-upload"> </i> icon-upload</li>
<li><i class="icon-inbox"> </i> icon-inbox</li>
<li><i class="icon-play-circle"> </i> icon-play-circle</li>
<li><i class="icon-repeat"> </i> icon-repeat</li>
<li><i class="icon-refresh"> </i> icon-refresh</li>
<li><i class="icon-list-alt"> </i> icon-list-alt</li>
<li><i class="icon-lock"> </i> icon-lock</li>
<li><i class="icon-flag"> </i> icon-flag</li>
<li><i class="icon-headphones"> </i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off"> </i> icon-volume-off</li>
<li><i class="icon-volume-down"> </i> icon-volume-down</li>
<li><i class="icon-volume-up"> </i> icon-volume-up</li>
<li><i class="icon-qrcode"> </i> icon-qrcode</li>
<li><i class="icon-barcode"> </i> icon-barcode</li>
<li><i class="icon-tag"> </i> icon-tag</li>
<li><i class="icon-tags"> </i> icon-tags</li>
<li><i class="icon-book"> </i> icon-book</li>
<li><i class="icon-bookmark"> </i> icon-bookmark</li>
<li><i class="icon-print"> </i> icon-print</li>
<li><i class="icon-camera"> </i> icon-camera</li>
<li><i class="icon-font"> </i> icon-font</li>
<li><i class="icon-bold"> </i> icon-bold</li>
<li><i class="icon-italic"> </i> icon-italic</li>
<li><i class="icon-text-height"> </i> icon-text-height</li>
<li><i class="icon-text-width"> </i> icon-text-width</li>
<li><i class="icon-align-left"> </i> icon-align-left</li>
<li><i class="icon-align-center"> </i> icon-align-center</li>
<li><i class="icon-align-right"> </i> icon-align-right</li>
<li><i class="icon-align-justify"> </i> icon-align-justify</li>
<li><i class="icon-list"> </i> icon-list</li>
<li><i class="icon-indent-left"> </i> icon-indent-left</li>
<li><i class="icon-indent-right"> </i> icon-indent-right</li>
<li><i class="icon-facetime-video"> </i> icon-facetime-video</li>
<li><i class="icon-picture"> </i> icon-picture</li>
<li><i class="icon-pencil"> </i> icon-pencil</li>
<li><i class="icon-map-marker"> </i> icon-map-marker</li>
<li><i class="icon-adjust"> </i> icon-adjust</li>
<li><i class="icon-tint"> </i> icon-tint</li>
<li><i class="icon-edit"> </i> icon-edit</li>
<li><i class="icon-share"> </i> icon-share</li>
<li><i class="icon-check"> </i> icon-check</li>
<li><i class="icon-move"> </i> icon-move</li>
<li><i class="icon-step-backward"> </i> icon-step-backward</li>
<li><i class="icon-fast-backward"> </i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward"> </i> icon-backward</li>
<li><i class="icon-play"> </i> icon-play</li>
<li><i class="icon-pause"> </i> icon-pause</li>
<li><i class="icon-stop"> </i> icon-stop</li>
<li><i class="icon-forward"> </i> icon-forward</li>
<li><i class="icon-fast-forward"> </i> icon-fast-forward</li>
<li><i class="icon-step-forward"> </i> icon-step-forward</li>
<li><i class="icon-eject"> </i> icon-eject</li>
<li><i class="icon-chevron-left"> </i> icon-chevron-left</li>
<li><i class="icon-chevron-right"> </i> icon-chevron-right</li>
<li><i class="icon-plus-sign"> </i> icon-plus-sign</li>
<li><i class="icon-minus-sign"> </i> icon-minus-sign</li>
<li><i class="icon-remove-sign"> </i> icon-remove-sign</li>
<li><i class="icon-ok-sign"> </i> icon-ok-sign</li>
<li><i class="icon-question-sign"> </i> icon-question-sign</li>
<li><i class="icon-info-sign"> </i> icon-info-sign</li>
<li><i class="icon-screenshot"> </i> icon-screenshot</li>
<li><i class="icon-remove-circle"> </i> icon-remove-circle</li>
<li><i class="icon-ok-circle"> </i> icon-ok-circle</li>
<li><i class="icon-ban-circle"> </i> icon-ban-circle</li>
<li><i class="icon-arrow-left"> </i> icon-arrow-left</li>
<li><i class="icon-arrow-right"> </i> icon-arrow-right</li>
<li><i class="icon-arrow-up"> </i> icon-arrow-up</li>
<li><i class="icon-arrow-down"> </i> icon-arrow-down</li>
<li><i class="icon-share-alt"> </i> icon-share-alt</li>
<li><i class="icon-resize-full"> </i> icon-resize-full</li>
<li><i class="icon-resize-small"> </i> icon-resize-small</li>
<li><i class="icon-plus"> </i> icon-plus</li>
<li><i class="icon-minus"> </i> icon-minus</li>
<li><i class="icon-asterisk"> </i> icon-asterisk</li>
<li><i class="icon-exclamation-sign"> </i> icon-exclamation-sign</li>
<li><i class="icon-gift"> </i> icon-gift</li>
<li><i class="icon-leaf"> </i> icon-leaf</li>
<li><i class="icon-fire"> </i> icon-fire</li>
<li><i class="icon-eye-open"> </i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close"> </i> icon-eye-close</li>
<li><i class="icon-warning-sign"> </i> icon-warning-sign</li>
<li><i class="icon-plane"> </i> icon-plane</li>
<li><i class="icon-calendar"> </i> icon-calendar</li>
<li><i class="icon-random"> </i> icon-random</li>
<li><i class="icon-comment"> </i> icon-comment</li>
<li><i class="icon-magnet"> </i> icon-magnet</li>
<li><i class="icon-chevron-up"> </i> icon-chevron-up</li>
<li><i class="icon-chevron-down"> </i> icon-chevron-down</li>
<li><i class="icon-retweet"> </i> icon-retweet</li>
<li><i class="icon-shopping-cart"> </i> icon-shopping-cart</li>
<li><i class="icon-folder-close"> </i> icon-folder-close</li>
<li><i class="icon-folder-open"> </i> icon-folder-open</li>
<li><i class="icon-resize-vertical"> </i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal"> </i> icon-resize-horizontal</li>
<li><i class="icon-hdd"> </i> icon-hdd</li>
<li><i class="icon-bullhorn"> </i> icon-bullhorn</li>
<li><i class="icon-bell"> </i> icon-bell</li>
<li><i class="icon-certificate"> </i> icon-certificate</li>
<li><i class="icon-thumbs-up"> </i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down"> </i> icon-thumbs-down</li>
<li><i class="icon-hand-right"> </i> icon-hand-right</li>
<li><i class="icon-hand-left"> </i> icon-hand-left</li>
<li><i class="icon-hand-up"> </i> icon-hand-up</li>
<li><i class="icon-hand-down"> </i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right"> </i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left"> </i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up"> </i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down"> </i> icon-circle-arrow-down</li>
<li><i class="icon-globe"> </i> icon-globe</li>
<li><i class="icon-wrench"> </i> icon-wrench</li>
<li><i class="icon-tasks"> </i> icon-tasks</li>
<li><i class="icon-filter"> </i> icon-filter</li>
<li><i class="icon-briefcase"> </i> icon-briefcase</li>
<li><i class="icon-fullscreen"> </i> icon-fullscreen</li>
</ul>
</div>
</div>
Message Box
Get The Code
[message_box title='MESSAGE_TITLE' color='red' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='blue' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='yellow' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='green' close='true']ADD_CONTENT_HERE[/message_box]
Social icon
Get the code
[social type="facebook" opacity='dark']PLACE_LINK_HERE[/social]
[social type="twitter" opacity='dark']PLACE_LINK_HERE[/social]
[social type="delicious" opacity='dark']PLACE_LINK_HERE[/social]
[social type="deviantart" opacity='dark']PLACE_LINK_HERE[/social]
[social type="digg" opacity='dark']PLACE_LINK_HERE[/social]
[social type="flickr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="lastfm" opacity='dark']PLACE_LINK_HERE[/social]
[social type="picasa" opacity='dark']PLACE_LINK_HERE[/social]
[social type="rss" opacity='dark']PLACE_LINK_HERE[/social]
[social type="skype" opacity='dark']PLACE_LINK_HERE[/social]
[social type="stumble-upon" opacity='dark']PLACE_LINK_HERE[/social]
[social type="tumblr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="youtube" opacity='dark']PLACE_LINK_HERE[/social]
[social type="vimeo" opacity='dark']PLACE_LINK_HERE[/social]
Tabs
- Duis a odio ac nisl ullamcorper consectetur sed id nisi. Nulla a posuere lorem. Fusce varius lacinia tellus, non ultricies ipsum malesuada vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et dolor quis purus posuere vehicula a quis lorem. Ut pharetra diam id lorem interdum a porta odio egestas. Nulla et enim sem. Maecenas nec orci nec lectus viverra eleifend non at est. Mauris tempor massa in velit luctus ut pharetra sem rutrum. Etiam a vestibulum sapien. Phasellus quis ante nisl, sit amet gravida velit. Ut varius nulla nec ipsum condimentum fermentum. Curabitur adipiscing mattis dui eget sollicitudin. Ut suscipit, metus et imperdiet pharetra, sem est eleifend justo, sit amet ultricies arcu sem sit amet turpis. Nulla neque erat, interdum at dignissim ac, porttitor a ipsum.
- Donec velit nulla, interdum vitae egestas eget, faucibus sit amet dolor. Ut ac justo neque. Vivamus pulvinar ipsum nisi, vitae tempor dui. Aenean mollis iaculis nulla, at sollicitudin orci euismod a. In hac habitasse platea dictumst. Suspendisse scelerisque rhoncus lorem ac aliquet. Donec pretium sapien sit amet felis vehicula molestie. Sed eget turpis massa.
- Mauris sit amet lectus elit, a tempor velit. Aenean ut magna viverra nulla consectetur dictum eu ac enim. Praesent et metus non purus bibendum blandit non ac eros. Sed facilisis sodales scelerisque. Sed sodales tortor sed mauris ornare at cursus libero vehicula. Nullam nec leo nibh. Fusce sollicitudin sem porta nulla mattis congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Get the code
[tabs]
[tab_item title='ITEM_TITLE']ADD_CONTENT_HERE[/tab_item]
[tab_item title='ITEM_TITLE']ADD_CONTENT_HERE[/tab_item]
[tab_item title='ITEM_TITLE']ADD_CONTENT_HERE[/tab_item]
[/tabs]
Testimonial
Get the code
[testimonial author='TESTIMONIAL_AUTHOR' position='AUTHOR_POSITION']ADD_TESTIMONIAL_HERE[/testimonial]
Toggle Box
Cras rhoncus
Sed molestie lacinia massa et facilisis. Quisque vestibulum porta diam, eu ultrices nisi consectetur eget. Mauris elit mauris, viverra vel iaculis eu, aliquam id libero. Sed luctus urna non elit vehicula vulputate. Ut ac orci a lectus tincidunt varius. Suspendisse vestibulum justo a quam consectetur volutpat. Nulla sed ligula justo, non lobortis ligula. Fusce a dolor ut massa commodo pharetra. Pellentesque tincidunt imperdiet pellentesque. Morbi egestas, lacus posuere commodo sodales, ligula augue imperdiet ipsum, et venenatis quam turpis ut magna. Ut molestie diam vitae leo varius vestibulum. Suspendisse potenti. Nam a libero vitae libero consectetur mollis. Quisque eu posuere velit.Curabitur vitae
Duis id nunc sed urna ultricies laoreet. Cras rhoncus, nulla sit amet cursus cursus, velit ligula vestibulum nisi, nec pellentesque diam metus tempor lorem. Etiam et nisl mauris, et molestie turpis. Curabitur vitae velit odio. Nam viverra diam nec sapien condimentum porttitor. Sed aliquam, purus at euismod lacinia, lorem erat hendrerit augue, luctus fermentum sem lorem vel lacus. Nam vel lacus consequat urna ullamcorper sagittis sed eget lorem.
Get the code
[toggle_box]
[toggle_item title='ITEM_TITLE']ADD_CONTENT_HERE[/toggle_item]
[toggle_item title='ITEM_TITLE' active='true']ADD_CONTENT_HERE[/toggle_item]
[/toggle_box]
Vimeo
Get the code
[vimeo height='HEIGHT' width='WIDTH']PLACE_LINK_HERE[/vimeo]
Youtube
Get the code
[youtube height='HEIGHT' width='WIDTH']PLACE_LINK_HERE[/youtube]
Super User Aenean a est mi nec porttitor massa ornare nec
Quisque lobortis sapien eget nisi bibendum posuere? Quisque eget sapien quis nunc aliquet eleifend vel placerat neque? Nullam malesuada ornare lectus, eu sollicitudin nisl consequat et.
Curabitur fermentum, risus at tincidunt viverra, ipsum massa cursus nisl, eu mattis tortor magna ut sapien. Quisque dignissim felis nisl. Ut molestie nunc eget nulla cursus posuere. Proin eu leo sapien.
Curabitur augue libero, ultrices vitae dignissim vitae, ultricies ut sapien. Nulla dapibus, massa sit amet imperdiet semper, enim lacus feugiat nibh, nec posuere orci mi vel nulla. Nulla facilisi. Aenean pretium est in enim pharetra ut dapibus tortor porttitor.
Nunc convallis magna sit amet sem varius a condimentum ipsum hendrerit. Duis non turpis metus, vel tempus velit. Donec lectus lacus, porttitor quis convallis quis, adipiscing non urna. Sed a augue sem; eu bibendum nisi.
Vivamus lorem nisl, mattis sit amet auctor vitae, sodales eu odio. Sed lobortis, eros eget interdum consequat, dui mauris dapibus erat, vel tristique enim libero eu dui. Duis feugiat ante ut mi consequat at faucibus enim congue.
Praesent sapien velit, malesuada congue lobortis ultrices, laoreet vulputate augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus sed nulla felis, vitae vulputate tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lorem ligula, sed varius elit. Morbi placerat accumsan turpis quis auctor? Nullam vehicula volutpat libero, non iaculis lorem interdum mollis.
Sed mattis facilisis hendrerit. Sed velit elit, iaculis vel ultrices non, elementum eu lorem. Nullam pulvinar, orci a tincidunt pulvinar, arcu nisi feugiat mi, vel volutpat neque mi ut est. Proin ac eros mi, sed porttitor enim.
Super User Sed augue urna euismod sit amet ultricies
Integer lorem ligula; posuere quis lobortis in, euismod eu lectus. Aenean ut felis augue; eu porttitor nulla. Morbi sodales lorem et tortor consectetur at tincidunt lorem pellentesque. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Etiam tincidunt eleifend ante, at venenatis neque condimentum in. Fusce augue purus, consequat ac mattis quis, fermentum quis augue? Duis in faucibus dolor. Donec tincidunt imperdiet felis, eget tempor odio varius et? Aliquam quis lectus sit amet lectus rhoncus tempor.
Proin sit amet urna id neque euismod faucibus. Ut lobortis adipiscing arcu nec convallis. Nam mi tellus, tempus et semper id, venenatis ut felis. Nunc condimentum sem id libero tempor mattis.
Nunc fermentum gravida ligula non vulputate. Mauris fermentum, lectus eget congue cursus, tellus massa sodales mauris, et iaculis justo nibh at felis! Nulla fringilla urna enim, ut hendrerit ante.
Duis tortor nunc; interdum at porttitor eu, fringilla vitae nulla. Fusce a erat sit amet tellus euismod euismod. Etiam tincidunt cursus quam a scelerisque? Nulla ullamcorper nisl id nisl iaculis non suscipit quam condimentum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus in mauris quis metus varius viverra eget vel tortor. Duis a est sed augue interdum commodo? Integer vel ligula augue.
Etiam lobortis mauris a mi bibendum placerat. Suspendisse commodo pharetra fermentum! Nam suscipit ante non felis ullamcorper a feugiat dui malesuada. Maecenas risus augue, rhoncus sed feugiat quis; suscipit vitae ipsum. Donec non justo libero, id vulputate tortor. Integer porttitor, dolor a pulvinar tristique, ante mi imperdiet orci, nec congue dui orci ornare tortor.