Here at Adrenalin Media, we’ve been using font icons for the last few months. So we would like to share with you what are font icons, why are we using them, how we do it and finally what are the benefits for your website.
So what are font icons?
Font icons are basically a whole set of icons/symbols converted into one single font file. A font file is vector based, so it’s entirely scalable. Say good bye to the days of slicing separate images or adding them into long and dense sprite sheets.
Why are we using Font icons?
Nowadays, due to the rapid development of technology, the multiple screen sizes and resolutions, slicing images has become a very long and tedious process. One single icon requires 3 to 5 images in order to adapt every resolution. Now, we are able to utilise font icons where it is just one file instead of the multiple that would have been required beforehand. This is really handy for a menu navigation using icons for instance.
How we do it?
We first need to save all of our icons individually as a .SVG format, which is a fully scalable vector format and then we import those custom icons into a font icon generator such as http://icomoon.io/app or http://fontello.com/. Once your icons are uploaded, it will generate a font file that you can download and integrate in your website using @fontface.
What are the benefits?
All the icons are now customisable in the .css file - exactly like a font:
- You can increase/reduce the size without any loss of quality. Even on a retina/high definition screen that are increasingly popular, the icon will remain perfectly crisp and sharp at every resolution.
- You can change the colours easily - which is great for hover states. If a colour needs to be amended post launch, we can simply do it in the code without having to re-upload a new image.
What are the limitations?
As with every technology, there are some limitations.
Indeed, a font icon is a FONT with its own restrictions. It has to be monochrome - we cannot have multiple colours within the icon itself. The other major restriction is that if an icon is required to be updated or amended in any way, it means that we have to replace the whole font, not just the icon itself. The designer will need to plan all the icons in one stage. This is usually done towards the end of the design process where the entire set of icons is defined and approved.
Over all this has made our front end developers very happy! By reducing their slicing time considerably, they have more time to make your website look perfect! It’s also much easier to adjust and play with a font than it is with a static image.
Last but not least, is SPEED! It makes your website load considerably faster! A font file is indeed much quicker to load than images – For more details about this I encourage you to read this article from Pictonic.
At Adrenalin Media we are now using font icons as a norm, given that the benefits outweigh the limitations. We believe it is the better route of improving web standards.