CSS3 on MoreOnFew.com

How to use Glyphicons in bootstrap?

by

Like many other useful components, Bootstrap also provides a lot of easy-to-use Glyphicon “icons”. Well in simple terms these contain a list of useful font icons that you can easily use on your webpage. These font icons allow you to use over 250 glyphs or icons on your webpage, in font format using simple CSS classes.

What are Glyphicons in bootstrap ?

In simple terms, Glyphicons are icon fonts. So basically Glyphicons are icons that are embedded in the font. So the font, instead of showing alphabets, shows icons. Remember Windings and Webdings fonts on Windows? Using those used to give icons instead of alphabets. Glyphicons are also very similar to those. However, to use a specific icon you would have to use CSS classes instead.

Few Benefits of using them

Glyphicons are really helpful and recommended to use wherever possible, however you should take a call based on your requirements. To get started, here are few benefits of using Bootstrap Glyphicons.

  1. Color and Size can be changed whenever you want unlike in case of image icons.
  2. Background color, Opacity etc too can be changed easily.
  3. Light weight as only a font file has to be loaded instead of many icon images.
  4. Does not pixelate and can be used across devices and resolutions.
  5. Can be easily animated using CSS3.
  6. Can be easily changed as it just requires a class to be changed. Can be easier if you are using LESS or SASS/SCSS.
  7. Over 250 icons are available in just a single font file. Which means you can use over 250 icons multiplied by any number of variations you need using CSS. That’s large !

Getting started with Glyphicons in Bootstrap – A Simple tutorial

As I mentioned, using Glyphicons in Bootstrap is really simple. It is as simple as adding a CSS class ! However, I’ll walk you through the steps considering you are using it for the first time.
Here are the steps to use Bootstrap Glyphicons : Skip to step 2 if you already have bootstrap included on your webpage.
Step 1.
Firstly include bootstrap CSS on your webpage. If you have downloaded the bootstrap files, you can link the CSS from the local path. Alternatively, you can also use Bootstrap CDN. So now your code might look something similar to the following:

<!-- Latest CSS from local path -->
<link rel="stylesheet" src="my/path/bootstrap.css">

<!-- OR -->

<!-- Latest compiled and minified CSS from CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Or
You can install Bootstrap using Nodejs npm command:

$ npm install bootstrap

Step 2 :
Now that you have bootstrap included on your webpage, you can start using the Glyphicons. For performance reasons, Bootstrap has split the required properties into two classes, glyphicon and glyphicon-IconName . Here is an example of glyphicon usage :

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

Yes, it’s that simple ! If you notice, the only class that would change, if you needed to change the icon or use a different icon, is the second class. So instead of the search icon if I want to use a remove icon all I need to do is replace glyphicon-search with glyphicon-remove. So my classes would look like glyphicon glyphicon-remove . You can find the complete list of icons supported at the official site of Bootstrap Icons .

Few things to remember  :

Now that you see that using the glyphicons are really simple, let me add that there are few things you should consider while using Glyphicons:

  • Always use the Glyphicon classes on an empty element that does not have any text or child element within it.
  • Do not mix the classes with other components. In simple terms, do not combine glyphicon classes with other components. For example, if you need an icon within a button, do not combine button related classes and glyphicon classes on the same element. Instead use a nested <span> or <i> within the button and assign the glyphicon classes to it.
  • While using the LESS or SASS distribution, Bootstrap assumes that the glyphicon font files are located under ../fonts/ directory which is relative to the compiled CSS files. So if you have changed it, you need to update the @icon-font-path and/or @icon-font-name variables in the source Less file (usually found in variables.less file).

Bootstrap Glyphicons not working Error

Sometimes you would notice that your bootstrap Glyphicons might not show up even after ensuring that the classes you have used, the path to font etc are correct. In such cases, it could be possibly one of the following:

  • Please ensure that the Glyphicon fonts are directly accessible and does not throw a 404 error. This could be one of the reasons for the “bootstrap glyphicons not displaying” error.
  • If you are sure that the file is present in the correct folder but still throws a 404 error, then please check that the mime type of the font is correct. You can check the mimetype under Chrome’s Dev tools -> Network tab. Find the request for the font file and click on it. You should be able to see the details of the header information. Within those you’ll find the mimetype of the font that was server. Ideally it should be application/x-font-woff . You would have to set the correct mime type for the glyphicon font. This can be done at the server level.
  • Sometimes the font files get corrupted and throws error or shows boxes instead of icons, in such cases please download a fresh copy of the font files from Bootstrap’s website and replace your existing font files. This step is usually very helpful in most of the error cases.

To summarize, I would say that using Bootstrap Glyphicons are really simple. I believe it is a far better option to use if you are going to use Bootstrap in your project. However, if you just need the icons and not the bootstrap framework then you can also consider using Font Awesome which also is a Font based icon. If you are thinking what scores better in the ” font awesome vs glyphicons ” battle then well all I can say is that it depends on your usage and your requirements. You can also use Glyphicons as provided by the official Glyphicons site, the usage remains the same.