Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
Rodrigo Siqueira rsiqueira:   Followers: 27 ; Following: 31

Explore Rodrigo Siqueira's photo albums:
Beaugency (47)
Chateau de Chambord (4)
Saumur - France (6)
Culinária (20)
Photographing photographers (12)
Chartres - France (32)

Bootstrap Icons


How to use Bootstrap Icons in your site:

* This post is for Bootstrap 2. Check here for Bootstrap 3 icons.

Bootstrap Icons - compact

Bootstrap icons are included in the Twitter Bootstrap library framework and each icon can be used in your website or as app icons,  control panel icons or to use as software icons in your project. The css class will display a single icon from the bootstrap icon image file using the css sprite technique. Those Boostrap Icons are called "Glyphicons" ir "icon glyphs", that are 140 high quality beautiful icons in dark gray color. The class for each bootstrap icon and css command and examples are below.

1) Include the Bootstrap CSS file.

You can download Bootstrap or link to their hosted Bootstrap file:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">

2) Use the class for each Bootstrap Icon:

  <i class="icon-adjust"></i>

  <i class="icon-align-center"></i>

  <i class="icon-align-justify"></i>

  <i class="icon-align-left"></i>

  <i class="icon-align-right"></i>

  <i class="icon-arrow-down"></i>

  <i class="icon-arrow-left"></i>

  <i class="icon-arrow-right"></i>

  <i class="icon-arrow-up"></i>

  <i class="icon-asterisk"></i>

  <i class="icon-backward"></i>

  <i class="icon-ban-circle"></i>

  <i class="icon-barcode"></i>

  <i class="icon-bell"></i>

  <i class="icon-bold"></i>

  <i class="icon-book"></i>

  <i class="icon-bookmark"></i>

  <i class="icon-briefcase"></i>

  <i class="icon-bullhorn"></i>

  <i class="icon-calendar"></i>

  <i class="icon-camera"></i>

  <i class="icon-certificate"></i>

  <i class="icon-check"></i>

  <i class="icon-chevron-down"></i>

  <i class="icon-chevron-left"></i>

  <i class="icon-chevron-right"></i>

  <i class="icon-chevron-up"></i>

  <i class="icon-circle-arrow-down"></i>

  <i class="icon-circle-arrow-left"></i>

  <i class="icon-circle-arrow-right"></i>

  <i class="icon-circle-arrow-up"></i>

  <i class="icon-cog"></i>

  <i class="icon-comment"></i>

  <i class="icon-download"></i>

  <i class="icon-download-alt"></i>

  <i class="icon-edit"></i>

  <i class="icon-eject"></i>

  <i class="icon-envelope"></i>

  <i class="icon-exclamation-sign"></i>

  <i class="icon-eye-close"></i>

  <i class="icon-eye-open"></i>

  <i class="icon-facetime-video"></i>

  <i class="icon-fast-backward"></i>

  <i class="icon-fast-forward"></i>

  <i class="icon-file"></i>

  <i class="icon-film"></i>

  <i class="icon-filter"></i>

  <i class="icon-fire"></i>

  <i class="icon-flag"></i>

  <i class="icon-folder-close"></i>

  <i class="icon-folder-open"></i>

  <i class="icon-font"></i>

  <i class="icon-forward"></i>

  <i class="icon-fullscreen"></i>

  <i class="icon-gift"></i>

  <i class="icon-glass"></i>

  <i class="icon-globe"></i>

  <i class="icon-hand-down"></i>

  <i class="icon-hand-left"></i>

  <i class="icon-hand-right"></i>

  <i class="icon-hand-up"></i>

  <i class="icon-hdd"></i>

  <i class="icon-headphones"></i>

  <i class="icon-heart"></i>

  <i class="icon-home"></i>

  <i class="icon-inbox"></i>

  <i class="icon-indent-left"></i>

  <i class="icon-indent-right"></i>

  <i class="icon-info-sign"></i>

  <i class="icon-italic"></i>

  <i class="icon-leaf"></i>

  <i class="icon-list"></i>

  <i class="icon-list-alt"></i>

  <i class="icon-lock"></i>

  <i class="icon-magnet"></i>

  <i class="icon-map-marker"></i>

  <i class="icon-minus"></i>

  <i class="icon-minus-sign"></i>

  <i class="icon-move"></i>

  <i class="icon-music"></i>

  <i class="icon-off"></i>

  <i class="icon-ok"></i>

  <i class="icon-ok-circle"></i>

  <i class="icon-ok-sign"></i>

  <i class="icon-pause"></i>

  <i class="icon-pencil"></i>

  <i class="icon-picture"></i>

  <i class="icon-plane"></i>

  <i class="icon-play"></i>

  <i class="icon-play-circle"></i>

  <i class="icon-plus"></i>

  <i class="icon-plus-sign"></i>

  <i class="icon-print"></i>

  <i class="icon-qrcode"></i>

  <i class="icon-question-sign"></i>

  <i class="icon-random"></i>

  <i class="icon-refresh"></i>

  <i class="icon-remove"></i>

  <i class="icon-remove-circle"></i>

  <i class="icon-remove-sign"></i>

  <i class="icon-repeat"></i>

  <i class="icon-resize-full"></i>

  <i class="icon-resize-horizontal"></i>

  <i class="icon-resize-small"></i>

  <i class="icon-resize-vertical"></i>

  <i class="icon-retweet"></i>

  <i class="icon-road"></i>

  <i class="icon-screenshot"></i>

  <i class="icon-search"></i>

  <i class="icon-share"></i>

  <i class="icon-share-alt"></i>

  <i class="icon-shopping-cart"></i>

  <i class="icon-signal"></i>

  <i class="icon-star"></i>

  <i class="icon-star-empty"></i>

  <i class="icon-step-backward"></i>

  <i class="icon-step-forward"></i>

  <i class="icon-stop"></i>

  <i class="icon-tag"></i>

  <i class="icon-tags"></i>

  <i class="icon-tasks"></i>

  <i class="icon-text-height"></i>

  <i class="icon-text-width"></i>

  <i class="icon-th"></i>

  <i class="icon-th-large"></i>

  <i class="icon-th-list"></i>

  <i class="icon-thumbs-down"></i>

  <i class="icon-thumbs-up"></i>

  <i class="icon-time"></i>

  <i class="icon-tint"></i>

  <i class="icon-trash"></i>

  <i class="icon-upload"></i>

  <i class="icon-user"></i>

  <i class="icon-volume-down"></i>

  <i class="icon-volume-off"></i>

  <i class="icon-volume-up"></i>

  <i class="icon-warning-sign"></i>

  <i class="icon-wrench"></i>

  <i class="icon-zoom-in"></i>

  <i class="icon-zoom-out"></i>
 

Bootstrap Icons (* version bootstrap 2)

Bootstrap Icons

The image above is the list with all Bootstrap Icons with the respective icon name and icon sample.

Source of this image: http://getbootstrap.com/2.3.2/base-css.html

 

Post by Rodrigo Siqueira (2013-04-23 12:23)

From: Jefferson
Thanks! Helped a lot! 2014-04-11 10:02

From: PJ
nice thanks for sharing the easy way out. 2013-08-29 02:07

Post your comment:

Name: Email: Site:




| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com