Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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

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

bootstrap tutorial for beginners

1 comment:

  1. Hello sir ....Everything is best and thanks for this.But it is difficult to switch NEXT when PREVIOUS is finished in Bootstrap tutorials.


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.