Adding a custom icon font to our theme

An icon font is one that includes special characters, usually icons, instead of normal characters. Bootstrap includes the Glyphicon icon font that we already integrated in our theme in Chapter 2, Creating a Responsive Magento Theme with Bootstrap 3.

Alternatively, we can integrate another great icon font that includes more than 300 icons that are ready to use. This awesome icon font is called Font Awesome! The following screenshot shows the Font Awesome website:

You can decide to use this icon font instead of the font released along with Bootstrap.

To integrate Font Awesome into your theme, follow the ensuing steps:

1. First, download the font from http://fortawesome.github.io/Font-Awesome/.

2. Then, unzip the file and within the folder, navigate to the css folder.

3. Now, link the CSS file from the local.xml file by including the following actions within the reference name="head", which is placed within the default handle, as follows:

   <!-- Adding FONT AWESOME Css...