Posted: May 8, 2013 By:

Turning Your Icons Into A Web Font

Today’s featured graphic design tutorial is from Martin Gittins, an interactive web designer from London who came up with a way to turn your icons into a web font or icon font. Why would you want to do that, you may ask? Well, the need occurred to Martin after viewing his new site on an old iPad. His icon looked blurred after viewed from up close or zoomed in, and when viewed through Retina display the icon doesn’t even look sharp and crisp at all even when viewed on normal size.


At first, Martin thought about using CSS to create double-sized sprite images to set them to display at half their size. This almost worked. It did look good on Retina display but once you zoom in, the blurriness returned but the text maintained its crispness and sharpness. That’s when he thought about turning his icons into a font.

In the tutorial, you’ll learn how to accomplish this (create an icon font) using a free online app called IcoMoon. This helpful tool will take away all of the trouble of converting symbols into a web font. You can find his tutorial here.

Advantages and benefits of using an icon font:

  • It is smaller file size
  • It can be set to any size using CSS (<code>font-size</code>)
  • You can apply text effects to your icon
  • Web fonts are supported by ALL modern browsers (including IE6)

Post Categories

Tips & Tricks