How to use Bootstrap Glyphicons

What are Glyphicons?

Glyphicons are icon fonts that can be used in a variety of web applications. They are a set of visual icons, symbols, and fonts provided by Bootstrap. Although there are other iconic fonts, for example, favicons that are premium but glyphicons are free for Bootstrap developers. Let's see an example of how to use glyphicons in our web application.

Example

Let's look at the code below:

Explanation

First, let’s understand that glyphicons can be applied in various ways according to our preference. In the above code example, we apply glyphicons as a link. In a button, we also use it as a stand-alone element.

We'll use lines 15 and 17 to explain the basic usage of glyphicons then you can put on your thinking cap and initiative to use them however you want.

In lines 15 and 17 the <span> and <a> element has the bootstrap glyphicon glyphicon-pencilclasses, so to use any glyphicon in bootstrap:

• Use the <span> or <a> element.
• Set the class attribute of the <span> or <a> element as glyphicon then a space and then glyphicon-iconname.

So to use a headphone icon glyphicon glyphicon-headphones, the keyword glyphicon comes first, then the `glyphicon-iconname (the icon name can be any name of the icon). See the Glyphicon reference for more Glyphicons.