Tip: Use an icon font instead of images

Published 12 Feb by SuperNOVA

Tip: Use an icon font instead of imagesOften in your websites you have to use custom icons. Be it social media icons, simple emoticons or generic icons symbolizing an action. Often they result in lots of images being used as custom icons. Learn how to use icon fonts to make your website perform better.

What’s wrong with using images?

Nothing and everything.
Confused? Let me clear that up.

There is nothing wrong in using images as icons architecturally or syntactically. But as the number of icons in your website increases, the number of HTTP requests in your site increases. This results in a lower site load time and therefore a poor performance.

Using image as icons also has another pitfall: responsiveness. When an image is shrunk down it is still pretty clear, but when an image is expanded, it gets pixelated. Serving pixelated images to your users leads a bad impression, which you never want.

Images also make the whole usage rigid. Imagine you have to change the color of an icon in different scenarios(hover over a facebook icon and it changes color), with images you have to use different images, which leads to even more HTTP requests.

How to remedy that?

While its not a rule for all of the situations but often you can use an icon font which serves your purpose. Icon fonts offer a wide set of commonly used icons and there is a good possibility that the icon you want might exist in one or the other set. If its not, some services also offer you to make your own(but more about that in another post).

Cool. Which ones should I use?

While Font Awesome is one of the most popular icon fonts out there. I would surely recommend Fontello. Not only Fontello offers choices from a lot of icon fonts, but it lets you create your own font. That means that if your site uses only 6 icons, you don’t have to import all 500 or more icons and their CSS. This saves a lot of bandwidth(in kbs) for your users.

Note, that their are many other services like Fontello(better perhaps), but most of the ones I am aware of are paid, while Fontello is free. Its definitely my first choice of icon font service.

How exactly should I use an icon font in my website?

While, their is always a detailed description on the website of the font. But the generic steps are as follows:

  • Download the font and CSS files
  • Place the fonts and css files on your website server(For example /var/www/html on Apache/Ubuntu)
  • Include the CSS files in the <head> section of your website.
  • Use the icons as fonts(Like in case of Font Awesome use <i class=”fa fa-facebook”></i> for a facebook icon.)

Conclusion

While, not in every situation, but often using a custom icon font set can lead to a better performance for the user and an even better flexibility for you as Web Developer. Learn to use them and I promise you will definitely fall in love with them.