Introduction to Icon Fonts

Tags: , , , , , &


Remember the awesome dingbats of the early 2000s? In the last decade, they have evolved into sophisticated font sets now known as icon fonts or symbol fonts. Icon fonts are great to use for lots of projects, from social media icons to arrows and symbols, all you need is a bit of CSS.

In this part 3 of our web typography series, we detail what icon fonts are, why you should use them, best use examples, and tips for implementation in your own design and development projects. Don’t forget to also check out A beginner’s guide to using Google Fonts and Top 6 tips for choosing fonts for your website.

Why the need for icon fonts?

In the past designers and web developers typically used raster files such as PNG or JPG when an icon was called for. These raster files display wonderfully on static designs with set height and width.

The challenge is that we can no longer predict a set width and height of our canvas. Don’t get me wrong, we love the responsive web and beautiful high density retina displays – there’s no turning back. It’s just that our familiar raster icons may appear pixilated, and lose definition on any canvas other than the one that they were specifically crafted for.

Thankfully imaging techniques have adapted. In modern web design there’s now a range of viable options, such as image replacement, SVG or Icon fonts. The latter two scale endlessly up or down for any resolution. Mobile, tablet, desktop, television…

So, what are icon fonts?

Icon fonts, a popular choice for both designers and developers are essentially fonts made up out of many tiny images, or icons. They look as crisp and clear as the text on any screen. Like all current imaging opting icon fonts do however have their share of pros and cons.

The Pros

  • All web browsers, even IE6, have the ability to render embedded fonts in an HTML page.
  • Icon fonts can be modified on the fly via CSS. Rescale, change colour, add a shadow etc.
  • Vector looks great on higher pixel densities, like those found in Apple’s retina displays.
  • You need only one Http request for all icons.
  • You don’t need to use any difficult tricks to adjust icons such as sprites or image replacement.

The Cons

  • Font characters are single-colour
  • Fonts generation is harder than raster image or SVG generation
  • You have to be strategic with icon fonts to ensure they are used in an accessible way.
  • An icon may be perceived in an unexpected way. Take for example Share: The Icon No One Agrees On.

Custom Icons and Implementation

The occasional task will call for a custom icon, such as a client logo. There’s some brilliant services such as IcoMoon, or Fontastic. check out The Big List of Flat Icons & Icon Fonts from CSS Tricks. After generating your own Icon Font a download should include all the files required for @font-face, including custom CSS.

Icon fonts in WordPress

To use Icon fonts within WordPress you can upload the font files in the /fonts folder of your custom font to a /fonts folder in your theme. Check out The Beginner’s Guide to Icon Fonts in WordPress for more information.

Font Awesome gains a few more brownie points in this regard as it provides a very easy to use CDN which you can include in the head of your HTML.

Icon fonts in desktop applications

After installing the icon-font files you can generally access the required characters through the glyph panel of your desktop application, as demonstrated in Adobe Illustrator below. Simply select the text-tool, choose your font-family, and then double click the desired glyph. Font Awesome also provides a useful cheatsheet which allows you to copy/paste the desired icon directly into your document.

What was that about SVG?

One compelling argument of SVG over icon fonts the ability to use full colour. You can hack your way around this by overlapping two or more icons in “multi-colour” stacked icons, better yet check out Stackicons. The choice between SVG and font icons generally comes down to browser support. Read Inline SVG vs Icon Fonts on CSS Tricks.

People who have viewed this post also viewed

Leave a comment

* Required fields


Please enter the CAPTCHA text