Ali Jafarian

Page speed for websites and applications is always a consideration, especially for high traffic properties – and with the growing prevalence of mobile/tablet usage, it’s certainly a high priority consideration.

To cater an optimized experience for these devices we have to ensure that our sites and apps are FAST. So today we’re going to discuss the speed [and performance] advantages of using font icons (also known as “glyhps”) over more traditional icon approaches – such as images, background images, and image sprites.

First, some background…

Icons have been used on the web for quite some time now. They’re commonly found in:

  • A) Image format (.png, .jpg, or .gif)
  • B) As background-images using CSS
  • C) Using image sprites – which basically combines multiple images into one image and then uses CSS to specify placement

So what’s wrong with these approaches?

  • 1) They require network requests – every time you add a new image or background-image you’re asking the browser to download that resource. Multiple images mean multiple network requests, which slows down the user experience… especially for mobile!
  • 2) They’re HEAVY! Most images and sprites are over 10k in size. For bigger sites this adds up quickly.
  • 3) There’s additional work and performance concerns around mobile optimized images for high resolution displays. For example, we have to deliver higher quality [and heavier] images for retina devices like the newer iPads and Macbook Pros.
  • 4) They can be time consuming to maintain – for example, if you want to add a new icon to an image sprite you have to open up an image editor (Photoshop), add that image to your sprite, save it as a new image, and then apply new CSS for the placement.

Font Icons – the Answer to our Problems

Font icons address all of these concerns. They’re typically bundled into one network request; they scale perfectly to all devices regardless of resolution; and they’re much easier to maintain. As an added bonus, you can also style them! That’s right, font icons typically accept a variety of CSS properties including color, size, border, etc.

How do Font Icons work?

Using font icons couldn’t be easier. First, reference the font icon library of your choice. We’ll use Font Awesome for this example:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>

Note: The example above uses a cdn version where the font library is all packaged and ready to go. You can also host the library yourself and reference the specific files needed, which can be found in Font Awesome’s documentation.

Then, simply generate an icon using a span or i tag and they’re associated reference class. Example below:

<i class="fa fa-envelope"></i>

Finally, add some CSS to your icon to give it some styling:

.fa-envelope {
     color: #fff;
     background: #08c;
     padding: 5px;
}

Which Library should I use?

I highly recommend Font Awesome, one of the more popular and supported libraries, at least as a starting point. It’s very easy to implement and supports over 400+ icons with it’s latest release, including social icons, application icons, and a variety of others. In fact, this site is using Font Awesome right now (ex: icons in the header navigation), along with many fortune 500 companies.

Below are some of the popular, free open source font icon libraries to choose from:

Creating your own Font Icons

A lot of business/product push-back comes from the need to create custom icons, or icons not included in popular libraries like Font Awesome. Don’t worry, there are tools to help with this. One of which is Icomoon. Icomoon allows you to upload Illustrator .ai files which then in turn generate custom icon assets for you – font files and .css files to include in your project. Then you reference them in the same manner as described above. Easy cheesy!

Below are some of the popular font icon generators available:

Conclusion

Bottom line – as the web progresses and mobile/tablet devices become more and more prevalent, we HAVE to adapt and ensure that our digital experiences are faster and more performant. Using font icons is a step in the right direction. So get familiar with them and start working them into your projects today. If your boss pushes back just send them on over to this article :)


  • Font Awesome is pretty darn “awesome” for easily adding scalable icons to your website. It also works great with Bootstrap! However, the down side is that with all it’s cool icons, more than likely you won’t be using most of them on your pages, so loading the Font-Awesome.css file may add extra load time baggage to your websites page load time…