Almost every website these days uses icons in one way or another. They add character and help users to identify functions on the website.
Often icons are included on sites as a normal image which, whilst providing the correct effect, can be less versatile and a heavier load on the server. Icon fonts can help to make the use of icons on your website more efficient and more effective.
When you use an icon font, all icons are included in a set of icon files. This way only one request for the icon font is made to the server to be able to display all of the icons. If you’re using images, the web page will have to make a request to the server for every image and can be both time and data expensive.
Icon fonts are created from SVGs which make them fully scalable. You don’t need to edit the icon to make sure it is the right size to keep it crisp, and you don’t need to create the same icon in multiple sizes to use in different places on the site. Simply change the ‘font-size’ CSS property to have it change size as you need to.
As well as changing the font-size to increase and decrease the size of the icon font, you can use other CSS attributes to change the look of the icon. You could use the ‘color’ CSS attribute to change the colour of the icon, and the ‘background-color’ CSS attribute to give the icon a background. So you could have a white icon with a blue background on one page, and a blue icon with a white background on another page without having to create and include separate image files.
So now you know why you should be using icon fonts, how can you use them?
Luckily, there are many icon fonts available to download and use out-of-the-box. Some examples for sites with them include:
• Font Awesome – http://fontawesome.io/
• We Love Icon Fonts – http://weloveiconfonts.com/
• Fontello – http://fontello.com/
• Icomoon – https://icomoon.io/#icons
• WordPress Dashicons – https://github.com/WordPress/dashicons
How to use an icon font
For this tutorial, we’ll be using Font Awesome to include icons on your website.
To include the full Font Awesome icon font in your website (675 icons!) you’ll need to visit the website (http://fontawesome.io/) and click the big ‘Download’ button.Font This will download a zip file containing everything you need to start using the icon font.
Unzip the file and copy the whole directory to the CSS directory on your website (or wherever you keep your styling files). Rename the folder to ‘font-awesome’ to make it easier to reference.
Next, you’ll need to include the main CSS file for Font Awesome between the tags in your HTML. You can do this by using the following code:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Change the ‘/path/to’ with the path to your newly added ‘font-awesome’ directory.
And it’s as easy as that!
To use the icons on your site you can include a simple piece of HTML for each icon using the tag. Each Font Awesome icon has a class assigned to it, for example the phone icon has the class ‘fa-phone’. This class can then be used as follows to display the icon:
<i class=”fa fa-phone”></i>
You can also use simple CSS attributes as previously mentioned to style the icon. For example, the following phone icon will be twice as large as the text, and blue in colour:
<i class=”fa fa-phone” style=”font-size: 2em; color: blue;”></i>
Font Awesome provides a handy “cheatsheet” for you to see which icons are displayed with which classes which you can see here – http://fontawesome.io/cheatsheet/
In Part 2, we’ll be explaining how to make your own icon font out of your own collection of SVG icons, so stay tuned!