Bootstrap | Glyphicons

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our tutorial on Bootstrap, we will discuss about Glyphicons.

Bootstrap has a collection of 260 glyphs in font format. We are now going to explain to you guys what Glyphicons are.

What are Glyphicons?

Glyphicons are fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, nevertheless their inventor has made them available for Bootstrap projects at no cost.

READ: Bootstrap | Responsive utilities

Where to find Glyphicons?

Glyphicons can be found within the fonts folder of the downloaded Bootstrap. This contains the following files below -

• glyphicons-halflings-regular.eot

• glyphicons-halflings-regular.svg

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

Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within css folder of dist folder.

Usage

To use these icons, simply make use of the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.

<span class = "glyphicon glyphicon-search"></span>

Example

The following below is a simple example -

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Helper Classes

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Dropdowns.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.