Bootstrap Icons

Bootstrap Icons are the cool and descriptive way to present different elements with an icon. Using icons in the elements like buttons, navigations etc. not only add beauty in the presentation but also make it look more professional and descriptive. Many visitors are used to of their operating system icons like Tools icon, setting icon, search icon, repair with a lens etc that even without the text (that generally is not the case) they recognize the purpose of the button.

Twitter Bootstrap’s one of the feature is the library of around 200 icons that are basically glyphs taken from http://glyphicons.com/. The glyphicons icons are generally paid if you want to use it in your projects. However, for twitter Bootstrap, this set of icons is free that you can use anywhere on your website using the Bootstrap framework. The glyphs icons are in the font format from the Glyphicon Halflings set.

So you simply require to include glyphicon class and then icon class. Following is the list of icon classes (glyphicon) or class codes with icon symbol. Simply replace that search icon code to the one you want to use in your projects.

List of Bootstrap glyphicon – icons and class names

Following is the list of glyphicons with icon symbol and class names that you can use anywhere in your Bootstrap framework based project.

Example of using Icons in Navigation bar

Following example uses Bootstrap icons in nav bar in a button and a link. The link is using the glyphicon glyphicon-envelope class to show email icon and button is using the glyphicon glyphicon-search class to show search symbol.

Example of using glyphicon in form controls

You can include icons in the form elements like textboxes quite easily. This really adds awesome user experience. The following example shows how to use Twitter Bootstrap icon in form elements like textboxes.

The first textbox uses a Tick symbol (glyphicon glyphicon-ok class), to show success icon. Second text box shows the warning icon. The third textbox shows an error icon while the last one shows email icon within the textbox.