Bootstrap Glyphicons

Objective

Icon fonts are becoming increasingly popular due to their benefits. In this tutorial, we will discuss how to use and customize Glyphicons with Bootstrap 3. We will explain the CSS rules working behind the scenes, which will give you a better understanding of how icon fonts work. In this way, you can become familiar with any icon font settings other than Glyphicons.

What are Glyphicons

Glyphicons are icon fonts used in web projects. Although using Glyphicons requires a commercial license, you can use these icons for free through project-based Bootstrap. To show gratitude to the icon author, please include theGlyphicon websitelink.

Getting Glyphicons

If you have downloaded Bootstrap 3 (or any version before version 3) from https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip, you can find the Glyphicons in the fonts folder inside the dist folder. There are four files - glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, and glyphicons-halflings-regular.woff. The related CSS rules are written in the bootstrap.css and bootstrap-min.css files in the css folder inside the dist folder.

How to Use Glyphicons

In general, we can derive the common syntax for using Glyphicons with Bootstrap 3 as follows

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

* can be any keyword representing a specific icon. The following example demonstrates how to use it with a button.

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

View the example online.

Explanation of CSS Rules

The following CSS rules make up the glyphicon class

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

So the @font-face rule actually declares the font-family and the location where Glyphicons are found.

.glyphiconThe class declares a relative position offset by 1px from the top, displays as inline-block, declares the font, sets font-style and font-weight to normal, and sets line-height to 1. In addition, use-webkit-font-smoothing: antialiasedand-moz-osx-font-smoothing: grayscale;for cross-browser consistency.

Then, here

.glyphicon:empty {
  width: 1em;
}

is the empty glyphicon.

There are 200 classes, each targeting one icon. The common format of these classes is as follows

.glyphicon-keyword:before {
  content: "hexvalue";
}

For example, the user icon used in our example has the following class:

.glyphicon-user:before {
  content: "\e008";
}

We have seen how to use it. Next, let's see how to customize Glyphicons.

We will start with the example above and customize the icons by changing the font size, color, and applying text shadows.

Below is the starting code

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

The effect is shown below.

Customize Font Size

By increasing or decreasing the icon's font size, you can make the icon look bigger or smaller.

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
    <span class="glyphicon glyphicon-user"></span> User
</button>

Customize Font Color

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>

Apply Text Shadow

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>

Customizing Glyphicons

Click here to customize Glyphicons online.