Bootstrap icons

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.

Quick examples of Bootstrap glyphicons

Align icons in the Toolbar example
Icons in nav bar example
glyphicon in form controls example

How to use glyphicons in Bootstrap projects

Using the glyphicons in your web pages for different elements is quite easy.

You have to use a base class name followed by the individual icon class for performance reasons.

For example:

the base class name is: glyphicon

individual icon class: glyphicon-search

This is how you will use it in a <span> element.

<span class=”glyphicon glyphicon-search”></span>

<span class=”glyphicon-class”>Search</span>

Experience this online

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.

List of glyphicon icons for bootstrap

Bootstrap Glyphicon icon example in the button

Following example shows how to use Twitter Bootstrap icon in the button element. For illustration purpose, we used four buttons with Star, Cloud, Search and film icons in the buttons.

Bootstrap icons

Experience this online

Button with align icon example in toolbar

Following example uses left, right, and center alignment icons in the buttons.

Bootstrap icons toolbar

Experience this online

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.

Bootstrap nav bar

Experience this online

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.

Bootstrap icons form

Experience this online

Media control bootstrap icon example

Following example shows how to use media controls: backward, forward, fast-forward, fast-backward, play, pause and stop etc. buttons with glyphicons.

Bootstrap glyphicons

Experience this online

Further Reading: Bootstrap Tutorial | Bootstrap Tables