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:
- First, download the font from http://fortawesome.github.io/Font- Awesome/.
- Then, unzip the file and within the folder, navigate to the css folder.
- Now, link the CSS file from the 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 –>
<action method=”addCss”>
<stylesheet>css/font-awesome.min.css</stylesheet>
</action>
- Now that the font is integrated, let’s perform a
It is very simple to insert a symbol into the theme. Let’s suppose that you want to add a book icon. Search for one at the Font Awesome website and click on it as shown in the next screenshot:
Once you click on the book icon, a new page will open as shown in the following screenshot:
On this page, you can see the different size in which the icon is available for use and the following code to generate them:
<i class=”fa fa-book”></i>
To insert icon into the theme, simply copy and paste the code, and the icon will show up.
You can target that specific icon with its own CSS class fa-book. So, if you want to make it big and orange, you can execute the following code in your CSS file style.css:
.fa-book {
font-size:30px;
color: #F89223;
}
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.