Bootstrap icons

In this we will discuss using Glyphicons with Bootstrap 

Bootstrap tutorial for beginners

Bootstrap icons 
  • Provided by Glyphicons
  • There are over 250 glyphs
  • As glyphicons are font based, their colour and size automatically adjusts to the element colour and size on which it is being used
Here is the bootstrap link where you can find the full list of Glyphicons

How to use bootstrap glyphicons
Using these icons is very easy. All you have to do is include a <span> element with it's class attribute set to the name of the icon.

For example, if you want to display a search icon on a button element all you need is the following
<button><span class="glyphicon glyphicon-search"></span>Search</button>

bootstrap icons example 

At the moment, there is no space between the icon and the text on the button. For space include a single space between the span element and text as shown below.
<button><span class="glyphicon glyphicon-search"></span> Search</button>

how to use bootstrap glyphicons 

To place the search icon on the right hand side of the text, include the span element on the right side of the text.
<button>Search <span class="glyphicon glyphicon-search"></span></button>

bootstrap search icon button 

If you want only icon on the button, without any text, then just remove the text
<button><span class="glyphicon glyphicon-search"></span></button>

bootstrap button icon only 

Right now, the search icon colour is black which matches with the button font colour. Now if we apply btn and btn-primary classes on the button element, the search icon color is also automatically changed to match with the font colour.
<button class="btn btn-primary">
    <span class="glyphicon glyphicon-search"></span> Search

bootstrap glyphicons 

When the size of the button changes, so does the size of the icon. In the example below we are using btn-lg, btn-sm, and btn-xs for large, small and extra small buttons respectively.
<button class="btn btn-primary btn-lg">
    <span class="glyphicon glyphicon-search"></span> Search
<button class="btn btn-primary btn-sm">
    <span class="glyphicon glyphicon-search"></span> Search
<button class="btn btn-primary btn-xs">
    <span class="glyphicon glyphicon-search"></span> Search

Notice as the size of the button changes, the size of the icon also changes automatically 
bootstrap glyphicons example