Illustration of eye ball next to masked person

The Neverending Story: Icon Hurdles

How to use icon fonts to add design drama to your site in a way that's both fast and future-proof.

Here's the scenario: a client asks for iconography to add design drama to their website. You immediately run for Photoshop. Stop. There's a better way.

But you say: "I love Photoshop and sprites have always worked great for me in the past! I don't see any reason why I can't just create a default sprite and a retina sprite and use them accordingly."

While this might seem like a viable option, it's simply not scaleable. Although those lovely PNGs might look fine on your four year old PC, they aren't going to look good on the latest Apple 5K Retina Displays, let alone whatever the newest resolution is going to be five years from now.

If you can create icons that are inherently vector (and therefore scalable), you can account for all the different pixel densities in the ever-changing tech landscape without weighing down the website with multiple files each tailored toward a specific use-case.

Before we start thinking about all the sprites we have to make, let's stop and consider something for a moment: ever notice how crisp and clear fonts look on high density displays? On high resolution devices you can instantly identify an image by the fuzziness that surrounds it. What if we could use images the same way we use fonts? We could pick the ones that fit our needs and they would display clearly with minimal effort on our part.

PNG at different sizes

Fonts, in the traditional sense, are really just shapes. We just happen to see those shapes as forming letters and words. What if instead of letters, those shapes became icons? What if instead of "A" "a" "G" "g" those items in a font were "" "" ""?

Icon Fonts to the Rescue

"Icon Fonts?", you ask. Icon Fonts are really just fonts, but instead of containing letters and numbers they consist of symbols and glyphs. You can add them to a website and style them with CSS the way you would other fonts for headings, body text, etc.

Think of fonts like Wingdings that are traditionally referred to as dingbat fonts. Dingbats are the original icon font, and just like dingbat fonts, technology old and new already supports icon fonts. Icon fonts are already supported in all modern browsers and legacy support back through Internet Explorer 4. They aid performance by keeping file sizes small, while giving designer the freedom to make changes on the fly. Encapsulating iconography in a font means you can do things in browser with CSS like:

  • Scale glyphs up and down
  • Add/remove/change color
  • Manipulate shadows
  • Change opacity
  • Rotate
  • Use CSS gradients (where browsers allow)

To play around with some of the functionality I recommend checking out CSS-Trick's "Why Icon Fonts are Awesome".

Best of all, it means that no matter what device or browser viewers use, they are going to be crisp, beautiful, and as future-proof as possible. The website can run faster because it only has one HTTP request. It serves one small file.

For most use cases deciding to use icon fonts means utilizing one of the common open source sets already out there; for example, Font AwesomeFontelloFoundation Icon Font. But what do you do when your clients says, "That's great, but we have our own icons we want to use"?

Balancing Client Needs

The icon sets listed above are great, but ultimately a bit generic. Clients may ask to have their specific look and feel reflected in their iconography. In the case of recent work Palantir did for a recent client, they had very specific use cases where generic icon fonts would not appropriately capture what they are trying to convey.

That said, it shouldn't have to be a battle between custom iconography and quality iconography. Being told that standard issue icon fonts aren't the answer shouldn't send you running to create something custom in Photoshop.

Creating Your Own Custom Font

Although we had a very specific reason creating a custom font, there are numerous other reasons that you might consider a custom font over what's already out there. The most important aspect is that it means that you are in complete control. You're not adding things to the website that you don't need, and everything is built to match your content and style.

Other reasons you might look to a custom icon font:

  • It will only include the icons that you need (no bloat)
  • It can combine icons from different sets
  • You can add/remove icons as you see fit
  • Smaller font and CSS files

To create a custom icon font for our past projects, I've used an open-source generator, FontCustom.

Installing FontCustom requires Ruby 1.9.2 and FontForge (with python). All of which can be easily installed on a Mac using Homebrew:

brew install fontforge --with-python brew install eot-utils gem install fontcustom

After getting FontCustom installed all you need to do is point it to a file of the SVGs you plan on using and tell it to compile – not all that different from telling Compass to compile a Sass folder into CSS.

fontcustom compile path/to/vectors # Compiles icons into 'fontcustom/' fontcustom watch path/to/vectors # Compiles when vectors are changed/added/removed

After compiling it will place a new folder into the folder you are compiling from (Pro Tip: You should be running it from the site root). It will also create a JSON file that will be configuration file. By default this will be named "fontcustom" and include all of the font files, a CSS file, and a HTML preview.

Screenshot of fontcustom folder

Congrats, we just created an icon font! All with one command.

You can change configurations – use a custom name, output Sass instead of CSS, etc. – with the following command:

fontcustom config

A full list of configuration options can be found with:

fontcustom help

Integrating the font into your website

From here you can easily integrate the font into a Drupal theme by:
1. Adding the font files inside the theme's CSS folder:

Screenshot of css folder

2. Integrating the styles adding a sass partial to the theme's Sass components.

Screenshot of Sass components folder

Since we were already using FontAwesome on the website it was easy for me to use the same conventions to add those class names throughout the HTML in order to add the new class names for my custom font.

Going one step further we integrated through the database. By creating a select list of icon names that coordinate to the Unicode character, content administrators have the option to easily select and modify the icons for their needs.

Now we have a couple of ways to use our custom icon font throughout the website. In the end it was not only a more future-proof route than using traditional PNG sprites to incorporate the clients iconography, but it was also faster to implement. Which makes creating your own custom icons cheaper or the client, faster for the developer, and better overall experience for end users. Win. Win. Win.