Icon fonts to the rescue! Making icons look great on all devices

In a previous post, we discussed the implications of Retina display on a website’s images. Maintaining the quality of an image across all devices is key, and there are a number of new solutions to help websites provide the best images as possible to as many users as possible. One such method that has been gaining popularity is the use of icon fonts.

Icon fonts are just what they sound like – fonts that are made up of icons. They have quickly become a widely used alternative to using images for icons, and they are quick and easy to implement. Let’s take a look at the benefits of using icon fonts, as well as what you need to know in order to start using them on your website today!

The benefit of icon fonts

Icon fonts provide many advantages that images don’t:

You can adjust the appearance of the icons simply using CSS.
If an image needs changed, you can only do that by going back to edit your image file. With icon fonts, you don’t need any software to make simple adjustments. You can resize the icons, change their colors, add drop shadows, and more, just with a few lines of code in your website’s CSS file. For example, if you want your image to change on hover, you no longer need to make two versions. Instead, use the CSS :hover selector on your icon and give it different styles. It’s that easy!

They are infinitely scalable.
Unlike images, you can resize icon fonts up and down without changing the quality, just as you can with the text on your website. For this reason, icon fonts make a great choice for serving images to devices using retina-display, or for sites that are responsive and need to adjust to all devices.

Font Awesome is one of the most popular icon fonts out there, and is free to use on your website. Below you can see an example of a Font Awesome icon, and how it scales without losing quality like a regular image would.


They are easy to implement.
All you need to get started using icon fonts are the font files and some CSS code. That’s it! Once you have those in place, icons can be added to menus, lists, headings, and so on with just some basic HTML.

Things to consider:

Which icon font to use.
There are many icon fonts readily available for use, both free and premium, and more are popping up all the time. You can find a huge list of icon fonts to choose from at CSS Tricks.

If you would rather create your own icon font, there are also tools that can help you with that. For example, IcoMoon is a great tool that allows you to put together a custom icon font using their broad selection of icons or by uploading your own. Once you’ve selected your icons, you can export the font files and the code you’ll need.


Which HTML syntax to use.
There are several different ways that icon fonts can be placed on your website, and that can change based on which icon font you are using. Many of the popular icon fonts require an empty tag where the icon font will be displayed using CSS, like this: <i class="icon-camera-retro"></i>. Make sure to check out the documentation for your icon font to find the right syntax.

Cross-browser compatibility and accessibility.
You’ll need to consider your users when choosing the right icon font, specifically whether or not you need to support older browsers. Depending on the technique you’re using to call your icon font and what browsers your website is supporting, you may need to make some adjustments to ensure your icons are cross-browser compatible. Some icon fonts come with this support built into the code, but others don’t.

You also need to take into consideration accessibility issues. Again, depending on the syntax used to call your icon font in your HTML, it may not be fully accessible to screen readers. You can find out more about icon fonts and accessibility in this article by Chris Coyier.