Go Make Things (https://gomakethings.

com/)

October 29, 2012

Using Icon Fonts

Note: This article is a bit stale. It contains outdated screenshots from the IcoMoon
interface, and is not how I build sites today. Ive since switched to using SVGs
(https://gomakethings.com/using-svgs/), and Im not looking back. That said, if youre
looking to get started with icon fonts, its still a worthwhile read.
This article was updated on August 19, 2013 to re ect the current way I implement icon
fonts on my projects, which now includes the use of a feature test.
Icon fonts are awesome, and if youre not already using them on your projects, you
should be.
Icon fonts are incredibly light weight. The one for this site is just 5kb in size. Because
its a single font le instead of multiple images, it requires just one HTTP request,
which is great for site performance. They can be scaled smoothly to any size, and
styled easily using CSS.
Heres how I implement icon fonts on my projects

Menu

Creating the font #

There are a lot of icon fonts available, but I use IcoMoon (http://icomoon.io/). The
free version contains more than 300 icons, with paid versions offering over 900.
More importantly, though, IcoMoon also offers a free app that lets you build your
own custom font. This means youre only using the icons you need, which keeps the
le size down.
Full Disclosure: Because I talk about this app so much on Twitter, the guy behind
IcoMoon offered me a free upgrade to their Ultimate Pack. I love the app so much that I
paid for it anyways, and I had purchased the Essential Pack months ago.
To get started, head over to the IcoMoon app (http://icomoon.io/app/) and select the
icons you want. When youre done, click the Font button at the bottom of the
screen to open the font generator.
Before you download your font, youll want to reset the encoding to Private Use Area.
This is section of unicode that has not been assigned any characters. Using the
private use area for your icons helps ensure that screen readers dont read them
aloud.

The alternative would be to use standard characters (a to z, numbers, etc.). This can
cause screen readers to say things like, z Twitter, which isnt good for accessibility.
Once youve reset the encoding, click Download.

Adding the Icons to Your Site #

When you unzip the download le, youll nd a few items. The ones we really care
about:
1. The font folder.
2. The style.css

le.

Upload the les to your site #

Open up your favorite FTP client, and copy the fonts folder into the same directory
as your CSS le. If you need to put it somewhere else, thats ok. Youll just have to
change a few lines of code in your CSS le.
Now, open up your stylesheet and add a new section for icons.

Embedding the font #

Open up style.css. At the top, youll see this code:

@fontface{
fontfamily:'icomoon'
src:url('fonts/icomoon.eot')
src:url('fonts/icomoon.eot?#iefix')format('embeddedopentyp
e'),
url('fonts/icomoon.svg#icomoon')format('svg'),
url('fonts/icomoon.woff')format('woff'),
url('fonts/icomoon.ttf')format('truetype')
fontweight:normal
fontstyle:normal
}

This tells browsers where to nd the les for the font-family IcoMoon, and what the
default style and weight are.

Youll notice there are four different le types listed. Unfortunately (but not
surprisingly), not all browsers support the same le type, so its necessary to include
a few. Youll also notice that eot is listed twice. This is to x an issue with older
versions of IE (again, big surprise).
I prefer to see SVG listed last, as its typically a bit bigger than the other letypes and
often not as well hinted. Its used for iOS, which cannot load any of the other types.
After moving SVG to the end, your code should like this:

@fontface{
fontfamily:'icomoon'
src:url('fonts/icomoon.eot')
src:url('fonts/icomoon.eot?#iefix')format('embeddedopentyp
e'),
url('fonts/icomoon.woff')format('woff'),
url('fonts/icomoon.ttf')format('truetype'),
url('fonts/icomoon.svg#icomoon')format('svg')
fontweight:normal
fontstyle:normal
}

Add it to your CSS le.

Note: If you copied the font folder to a location other than where your CSS le is
located, youll need to change the URLs in the @fontface declaration accordingly.

Update on 5/31/2013: In the comments, Nigel Anderson asked how many of these les
are downloaded by the browser (and how that could impact performance). The answer:
Browsers only download the rst supported le in the list, even if they support more than
one le type.

Creating a class #
There are two ways to include an icon font in your HTML. One involves adding data
icon= and then the character for your icon to an HTML object.

The second method, which I prefer, is to assign a class to the icon font. Rather than
remembering character values, you can add a Twitter icon, for example, by adding
class="icontwitter" to an HTML object.

IcoMoon gives you the option to use either method, but since the second is easier,
lets use that.
Youll see the following code in the style.css le:

/*UsethefollowingCSScodeifyouwanttohaveaclassperico
n*/
[class^="icon"]:before,
[class*="icon"]:before{
fontfamily:'icomoon'
fontstyle:normal
speak:none
fontweight:normal
webkitfontsmoothing:antialiased
}

This says that any class that begins with icon should use the IcoMoon font family,
has a style and weight of normal, and should not be read aloud by screen readers.
Youll notice that it also includes the webkit pre xed fontsmoothing property.
This improves the clarity of the font. For good measure, I also include a non-pre xed
version and textrendering:optimizeLegibility , which improves kerning on
Firefox and newer version of Internet Explorer.
The nal version of your code should look something like this:

/*UsethefollowingCSScodeifyouwanttohaveaclassperico
n*/
[class^="icon"]:before,
[class*="icon"]:before{
fontfamily:'icomoon'
fontstyle:normal
speak:none
fontweight:normal
webkitfontsmoothing:antialiased
fontsmoothing:antialiased
textrendering:optimizeLegibility
}

Copy that into your CSS le below your @fontface declaration.

Naming the icons #

Next, we need to associate the individual icons with their unicode characters.
IcoMoon does all of the heavy lifting here, creating human-readable classes for the
icons.
In this example, I created a simple font with three icons: Twitter, Facebook, and
Dribbble.
The style.css le contained this code:

.icontwitter:before{
content:"\e000"
}
.iconfacebook:before{
content:"\e001"
}
.icondribbble:before{
content:"\e002"
}

Youll notice that were using the CSS3 :before selector. This inserts the speci ed
content before whatever HTML object the class is applied to. The content property
is used to de ne the unicode character.
You can copy this code directly from style.css (without any modi cations) into your
CSS le.

Using icons in your HTML #

Now that youve done all that, including icons in your HTML is insanely easy.
Using my example font above, if I wanted to include a Twitter icon on my site, I
would just add <iclass="icontwitter"></i> to my HTML.
I use the <i></i> tags because theyre small, no longer used for italics, and theres
something logical about i is for icon. Also, its what they do in Twitter Bootstrap
(http://twitter.github.com/bootstrap/).

Update on 5/24/2013: In the comments, Michael Barrish correctly points out that <i> is
still a perfectly valid HTML element. What I meant to say was that the newer <em>
element is the preferred way to italicize, because it carries not just stylistic but semantic
meaning. Accordingly, I use <i> for my icons.
Dont forget to leave a space between the tag and the supporting text. For example,
use:

<iclass="icontwitter"></i>Twitter

Not:

<iclass="icontwitter"></i>Twitter

Styling icons #
Because the icons are a font, they will inherit the styling of their parent container by
default. However, you can apply additional styling using CSS.
For example, if you wanted all icons to have a shadow, you could add the text
shadow property to [class^="icon"]:before,[class*="icon"]:before .

You can also add gradients, hover effects, CSS3 transitions and more. One limitation:
the icons can only be a single color.

I like my social media icons to have branded colors, but still display the default hover
behaviors. Heres the code I would use to achieve that with the Twitter icon:

a.icontwitter{
color:#41b7d8
}

This code says that when a Twitter icon is used in a link, its color should be
#41b7d8 , which is Twitter blue.

In my base CSS, links on hover turn black darken and are underlined. With the code
above, the icon would still be underlined, but would be Twitter blue. We can x this
by adding a hover color:

a.icontwitter{
color:#41b7d8
}
a:hover.icontwitter{
color:#005580
}

Branded colors #
While by no means comprehensive, heres a list of popular social site colors to get
you started.

Twitter: #41b7d8
Facebook: #3b5997
Google: #d64937
LinkedIn: #0073b2
Vimeo: #388fc5
Flickr: #ff0084
Pinterest: #cb2027
Skype: #00aff0
RSS: #e0812a

Accessibility considerations #
Icon fonts are typically not read by screen readers. For accessibility reasons, you
should not rely on the icon alone to convey meaning.
Theres a simple CSS class you can use to include supporting text in your HTML but
position it off screen. If you wanted to display a Twitter icon, for example, you would
use this code:
HTML

<iclass="icontwitter"></i><spanclass="screenreader">Twitter
</span>

CSS

.screenreader{
position:absolute
top:9999px
left:9999px
}

Because the text wrapped in the .screenreader class is still displayed, screen
readers will detect it in the HTML and read it out loud. But because its positioned off
screen, sighted users will not see it.

Browser support #
Icon fonts work in Firefox, Chrome, Opera, Safari and the latest versions of Internet
Explorer back. They work in iOS and Android, but not Opera Mini. Strangely, they
dont work in IE9 on Windows Phone 7. This has been xed in Windows Phone 8.
While @fontface embedding has been supported since IE 5, the approach detailed
in this article uses pseudo selectors to include icons in the HTML, and thats only
supported back to IE 8. IcoMoon includes a JavaScript le named lteie7.js thats
supposed to provide support for older browsers, but Ive never gotten it to work, and
several others have mentioned running into issues with it in the comments section.
I treat icons as a progressive enhancement, and use a simple feature test to check for
support.

Feature test #
Browsers that dont support @fontface will sometimes display empty boxes where
the icons should go. This looks ugly and can sometimes overlap with text, making it
dif cult to read. I use a simple JavaScript feature test to check for @fontface and
pseudo selector support.
Download the script from GitHub (https://gist.github.com/cferdinandi/6269067) and
include it in your <head> element:

<scriptsrc="fontfacefeaturetest.js"></script>

This adds a .fontface class to the <html> element when both @fontface and
the :before pseudo selector are supported. In my CSS le, I pre x the icon names
with that class, so that theyre only activated when a browser has the proper support:

.fontface.icontwitter:before{
content:"\e000"
}
.fontface.iconfacebook:before{
content:"\e001"
}
.fontface.icondribbble:before{
content:"\e002"
}

You can also use this class to change what content is displayed based on whether or
not the browser supports icon fonts. For example, you might show an icon for
supporting browsers, and plain text for older browsers. Heres an example:
HTML:

<spanclass="iffontface"><iclass="icontwitter"></i><spancla
ss="screenreader">TweetThis</span></span>
<spanclass="nofontface">TweetThis</span>

CSS:

.iffontface,
.fontfacenofontface{
display:none
visiblity:hidden
}
.fontface.iffontface{
display:inline
visibility:visible
}

Using icons today #

Despite these considerations, icon fonts are very well supported, highly- exible, and
ready to be used on web projects today. Their small size and crisp resolution make
them a versatile addition to responsive web development.

REFERENCED & USEFUL RESOURCES #

1. IcoMoon (http://icomoon.io/)
2. Icon Fonts are Awesome (http://css-tricks.com/examples/IconFont/) by CSSTricks
3. Trent Walton on why he switched to icon fonts
(http://trentwalton.com/2012/05/04/icon-fonts/)
4. Typekit on Windows Phone 8 Support
(http://blog.typekit.com/2012/11/01/announcing-windows-phone-8-support/)

Have any questions or comments about this post? Email me at chris@gomakethings.com

(mailto:chris@gomakethings.com) or contact me on Twitter at @ChrisFerdinandi
(http://twitter.com/ChrisFerdinandi).
GET THE SPARE PARTS NEWSLETTER
Each week, I send out a short email packed with links to interesting stuff from around
the web. Enter your email below to get on the list.
Your email address...

Sign Up

About (https://gomakethings.com/about/)

Consulting (https://gomakethings.com/consulting/)

Workshops (https://gomakethings.com/training/)
Books (https://gomakethings.com/books/)

Talks (https://gomakethings.com/talks/)

Articles (https://gomakethings.com/blog/)

Code (https://gomakethings.com/open-source/)

Podcast (https://gomakethings.com/podcast/)

Newsletter (https://gomakethings.com/newsletter/)
Made with <3 in Massachusetts. Copyright 2016 Go Make Things, LLC. Unless otherwise noted, all code is free to use under the
MIT License (https://gomakethings.com/mit).