In this we will discuss using Glyphicons with Bootstrap
Bootstrap tutorial for beginners
Bootstrap icons
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
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.
To place the search icon on the right hand side of the text, include the span element on the right side of the text.
If you want only icon on the button, without any text, then just remove the text
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.
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.
Notice as the size of the button changes, the size of the icon also changes automatically
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
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
