YouTipFont icons are becoming increasingly popular due to their benefits. In this tutorial, we will discuss how to use and customize Glyphicons through Bootstrap 3. We will explain the CSS rules working behind the scenes, which will give you a better understanding of how icon fonts work. This way, you will be familiar with any icon font setup beyond Glyphicons.
Glyphicons are an icon font used in web projects. Although using Glyphicons requires a commercial license, you can use these icons for free through Bootstrap, which is project-based. To show appreciation to the icon authors, we hope you include a link to the Glyphicon website when using them.
If you have downloaded Bootstrap 3 (or any version prior to 3) from https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip, you can find the Glyphicons inside the fonts folder within the dist folder. There are four files here: 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 within the css folder inside the dist folder.
Generally, we can derive the common syntax for using Glyphicons through 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>
Example
The following CSS rules constitute 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 location where the Glyphicons are found.
The .glyphicon class declares a relative position offset by 1px from the top, renders as inline-block, declares the font, sets font-style and font-weight to normal, and sets line-height to 1. Additionally, it uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; to achieve cross-browser consistency.
Then, here:
.glyphicon:empty { width: 1em;}
is for empty Glyphicons.
There are 200 classes, each targeting a specific icon. The common format for 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 shadow.
Here is the starting code:
<button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-user"></span> User </button>
The effect is as shown below:
Customize Font Size
By increasing or decreasing the font size of the icon, you can make the icon appear larger 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>