Bootstrap icons

Suggested Video Tutorials
Part 13 - Bootstrap code blocks
Part 14 - Bootstrap table classes
Part 15 - Bootstrap button classes



In this video we will discuss using Glyphicons with Bootstrap



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
http://getbootstrap.com/components/#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>

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>

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>

If you want only icon on the button, without any text, then just remove the text

<button><span class="glyphicon glyphicon-search"></span></button>

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

</button>

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>

<button class="btn btn-primary btn-sm">

    <span class="glyphicon glyphicon-search"></span> Search

</button>

<button class="btn btn-primary btn-xs">

    <span class="glyphicon glyphicon-search"></span> Search

</button>

Notice as the size of the button changes, the size of the icon also changes automatically