In this tutorial you will learn how to use Bootstrap font icons.
Icons by Glyphicons
Bootstrap 3.3.7 includes more than 250 Glyphicons. As opposed to previous sprite version these icons are available in font format for better usability and scalability.
Since these Glyphicons are font based now you can create icons of any color just applying the CSS
color property on the specific element.
Tip:Bootstrap icons are provided by Glyphicons. However you are free to use these icons in your project but as a courtesy you can consider to include a link back to Glyphicons whenever practical.
How to Use Icons in Your Code
To use the Bootstrap icons you will require an
<span> tag along with a base class
glyphicon and an individual icon class
glyphicon-*. The general syntax for using Bootstrap icons is:
glyphicon-class-name is the name of the particular icon class (e.g.
glyphicon-star etc.) defined in
For example, to use search icon you can place the following code just about anywhere:
ExampleTry this code »
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>
— The output of the above example will look something like this:
Check out the next chapter to see how to use these icons in Bootstrap nav components.
Note:Remember to leave a space after the closing tag of icon element
</span> tag) when using icons along with the strings of text such as inside buttons or navigation links, to ensure proper spacing.