What are Glyphicons?

Glyphicons basically are the icons that can be used in web based projects. For bootstrap projects the glyphicons are free of cost and they are made free of cost by the creators of glyphicons haflings; otherwise the glyphicons haflings need a proper license.

Where to find Glyphicons?

In bootstrap 3, we can find the glyphicons in the fonts folder. Click on bootstrap folder and select the fonts folder then you will find the following files in the fonts folder:

• glyphicons- halflings- regular.eot
• glyphicons- halflings- regular.svg
• glyphicons- halflings- regular.ttf
• glyphicons- halflings- regular.woff

Usage:

To use the glyph icons in the code, use the class glyphicon- search within the span tag. In our web project we can use the glyph icons by writing the following code in our web code. For the proper padding you should leave a space between the glyph icon and the text.

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min. js” >< /script >

< script src = “/ bootstrap/ js/ bootstrap. min. js” ></ script >

</ head >

< body >

< h3 > Example of Glyphicons </ h3 >

< p >

< button type = “button” class = “btn btn- default” >

<span class = “glyphicon glyphicon- asterisk” ></ span >

</button>

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-plus”></span>

</button>

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-cloud”></span>

</button>

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-glass”></span>

</button>

<h4>Glyphicons of different sizes</h4>

</p>

<button type = “button” class = “btn btn-default btn-lg”>

<span class = “glyphicon glyphicon-star”></span>

</button>

<button type = “button” class = “btn btn-default btn-sm”>

<span class = “glyphicon glyphicon-star-empty”></span>

</button>

<button type =”button” class = “btn btn-default btn-xs”>

< span class = “glyphicon glyphicon-picture”></span>

</button>

</body>

</html>

The above code will generate the following result:

OUTPUT:

In the above example first we simply displayed different glyphicons on buttons by using the button tag. Then we displayed the glyphicons on buttons of different sizes that are large, small and extra small.