TL;DR If you are familiar with icon fonts (a.k.a. glyph icons), then you probably also know that there are numerous collections available online both for free and for purchase. If you can’t find the icons you want, or are keen to make your own icon fonts, in this tutorial I go through the chain of vector image -> SVG file -> font-family -> use on your website. I recommend Ico Moon for building your font families, but there are other fantastic sites like Fontastic and Fontello that do very much the same thing.
You should be using icon fonts
An icon font is a symbol produced from a font family – think of the classic Wingdings. Unlike Wingdings, however, todays icon fonts are useful for more than just easily decrypted messages. In the past designers, and developers would upload either numerous individual image files or one large sprite sheet to their sites in order to use icons. Provided that your icons only need to be monochromatic (one colour), it’s advantageous to use icon fonts instead of any uploaded file for a number of reasons.
- Fewer image files means fewer HTTP requests to the server which would slow down the site.
- Fewer sprites means fewer CSS adjustments whenever a single sprite’s size is changed.
- Fonts are vector-based, so icon fonts will scale upward in size much better than an image.
|Image (natural width: 20px)||Icon font|
The video “Icon Fonts: Part 1” takes you through how to make a font from a vector-based drawing to a font-family in your CSS. Below, I will only talk about some considerations when generating your font-families and some things I should mention about using Ico Moon.
Using a font generator
When you build your font-family using the font generator of your choice, don’t forget to:
- Change the font family name to either the name of your font or the name of the project. Don’t leave it as the default or something generic because your computer will quickly fill up with “custom_font”, “custom_font (1)”, “custom_font (2)’.
- Change the css prefix to something unique to that font or, better yet, unique to the project. Leaving the prefix as “icon-” is fairly common and therefore puts you at risk of having third-party or “vendor” CSS and plugins overwriting your font-family styles.
Using icon fonts offline
Something I failed to mention in the video is how save your icon fonts to your computer so they can be used in applications like Photoshop, Sketch, Word, etc. You’ll want to first be sure that your font is being saved with a Latin code base – this way there are keyboard combinations that will be mapped to the different icons. It’s how pressing the letter ‘A’ actually gives you an ‘A’… except this time ‘A’ might be an alarm clock, or balloon, or representation of a secure payment gateway on an e-commerce website.
Second, (incoming Mac bias) you’ll need to download the files and find the .ttf file – which stands for TrueType. From there, simply open Font Book and drag the .ttf file onto the screen. Alternatively, you can open Font Book and then press Command-O and then browse the computer for the font. Here’s a video if that was too abstract.
Ico Moon’s big “gotcha”
Out of the various icon font generators available, Ico Moon is my favourite. There are a couple things to remember though when using the service. Namely that Ico Moon will not save your projects. Your projects in Ico Moon are saved in your browser’s cache.
- If you switch computers, you won’t be able to access any saved projects that were made on that first computer.
- If you clear your browser’s cache your projects will also disappear.
Ico Moon has a Premium version which will save your project data to the cloud and you’ll be able to access it at any time from any computer. This is pretty sweet, but if you can’t budget a premium membership there is still something you can do: With every project you download from Ico Moon, there will be an selection.json file. This file will have all the information about your project and can be uploaded to Ico Moon at any time to recreate it.
Why does it look like that?
There are a number of factors that can affect how your icon fonts will appear online. Line-heights, vertical-alignment, font-weights… and you should know that not all font generators pack the same default CSS. I’ve made a second video comparing how Fontastic and Ico Moon build icon fonts and I go over a couple CSS declarations you can write to start changing the display of your icon fonts.
As a final thought, you should remember that icon fonts are great for communicating information but they should be considered as a helper and not the sole source of information. Because there are web users who access web sites with the aid of a screen reader, there should be text accompanying a symbol whenever possible to describe what that symbol either links to or the subject material it represents.
When a user using a screen reader accesses your site, it isn’t necessary for their device to read out every font icon it sees – in fact, it may be more confusing than anything. Consider the following example:
Daily Tooth Tips
The HTML for the above heading looks like this:
<h4><i class="pjf-tooth"></i> Daily Tooth Tips</h4>
Now to avoid a screen reader from saying something dubious akin to “Black tooth daily tooth tips”, we need a way to communicate to the screen reader not to read the HTML containing the icon. There is a CSS declaration
speak: none, but this related article on Icon Font accessibility from the filament group says it is not well-supported. Instead, we are going to use an attribute for screen readers:
aria-hidden="true" and we’ll need to be sure that it is only being applied to the icon font and not the rest of the heading.
<h4><i class="pjf-tooth" aria-hidden="true"></i> Daily Tooth Tips</h4>