What is an Icon Font?
An icon font is just like any other computer font but instead of rendering letters it renders images. You’re probably familiar with an icon font that comes on most computers: Wingdings. Unfortunately, there aren’t a lot of useful or attractive icons in the Wingdings font family. Thankfully, there are other options available to us. To understand just how great icon fonts are, you first might need to understand how limited fonts on the web were in the past.
Background on Webfonts
When a website displays text, it uses a font file from the user’s computer. Web developers use code called a “Font Stack” to tell the computer which font to display. But since not every computer has the same fonts installed, the stack allows you to specify fallback options in case your first choice isn’t available.
font-family: Avenir, Helvetica, Arial, sans-serif;
Web designers wanted a way to make sure that a font they were using would be available for everyone. That’s where webfonts came in. Developers can include web font files with the site using CSS to make sure the text will look the same on every computer.
The Web & Icons
Websites use a lot of simple icons to convey meaning in a small amount of space. Most people interact with these icons everyday, like the example to the right from Facebook.
Websites with lots of small icon images use CSS Sprites to make the page load faster. Sprites look like a sheet of paper with all the icons on it in a grid. When you want to display an icon you cover all of the other icons so that only the one you want is visible. That seems a little crazy right? Well the reason that is done is because it’s actually much quicker for the browser to load one large image than it is to load dozens of small images.
What’s Wrong with Images?
Images are great, but they can be limiting. If you want to change the color of an image when the user interacts with it, you need to create another image. Want to have the image get bigger? That’s a new image. Or, an additional item in your image sprite, which by now is probably looking a little bit messy, like these examples from Twitter and Facebook.
So, how can we make these icons of ours more flexible? Turn them into a font! Fonts by nature are very flexible. When you are typing in Word, you can change the size and color of anything you want. Icon fonts bring that flexibility to simple images. For example, now when you hover over that icon it can slowly grow bigger and change it’s color.
Better than Wingdings
Making a custom font isn’t a common skill, and we don’t want to be stuck with Wingdings. Luckily, there’s no need for either of those. There are a number of icon fonts available on the web. At The Jake Group, our favorite is called Font Awesome. Font Awesome comes with a bunch of icons that are specifically geared toward web and user interface design. For most projects, we can find a set of high quality icons without drawing a thing. But sometimes we need something a little bit more custom to make sure the icon’s meaning is clear. For projects like that, we use Icomoon.
Ico what?
Icomoon is a webapp that let’s us modify an existing icon font or completely create our own. Using Adobe Illustrator, we create our own vector icons, and save them as .svg files. Then we upload those to the Icomoon app to include in our custom font. There we can also select icons from other icon fonts to use in our custom font.
Once we have all the icons we need selected, we can generate the files we need to include on our website. Add a sentence about where/how these files integrate.
Here are some examples of custom icons The Jake Group has recently created for use in a webfont on the Center for Clean Air Policy website.
Now we can include our own custom icons in our site without having to create a bunch of separate images for each time we want the user to interact with the icon.
