A little over a week ago, Wayne Helman posted an article proposing the use of @font-face for displaying icons. The article was well-received, but I was honestly expecting more excitement around this idea. From my view, this now seems like the way to set icons in a site. I feel strongly about the potential of this method, so I thought I would take the time to generate a font set for Iconic and to talk about why we should all be using this method for displaying icons.

Look Ma, No Images

Before I go into details, if this method is new to you, here is a simple demo of font-embedded icons. The basic idea is to generate a font containing your icons (much like wingding font sets), embedding that font using the @font-face CSS rule and taking advantage of the :before selector and content rule to inject a character bound to a specific icon.

• Home
• Plus
• Minus
• Window
• Dial
• Lightbulb
• Link
• Image
• Article
• Spin
• Map Pin
• Pin
• Denied
• Calendar
• Bolt
• Clock
• Book
• Tag
• Heart
• Info
• Chat
• Key
• Unlocked
• Locked
• Mail
• Phone
• Box
• Pencil
• Comment
• Trash
• User
• Volume
• Mute
• Cog
• Check
• Beaker

This demo is a simple list with a tags given specific classes for specific icons. Wayne Helman’s method was structured in a slightly different manner, but the general concept is the same. This method is surprisingly backwards compatible and low maintenance.

Pros and Cons of Font-Embedded Icons

Like pretty much everything in life, tradeoffs do exist with this method. I know for a fact that I will be implementing this method on my site, but I am certain I will not be using it for all my projects. Below is a basic breakdown of advantages and disadvantages.

Advantages

Potentially far less HTTP requests

Downloading 100 small files can be far slower than downloading one large file. Depending on the individual situation, this could result in a faster page load.

One icon, infinite sizes

Vector icons mean vector scaling. No more icon_8x8.png, icon_16x16.png, icon_24x24.png, etc.

Cleaner system for icon management

Managing icons in multiple colors and sizes can be a serious pain. With font-based icons, all the color/size variations you need are in just one file.

Switching your icons in one line of CSS

With all the talk about TypeKit and how easy it is to embed fonts, the same could soon be the case for icons. No more batch-replace of image references.

CSS3 transitions open interesting doors

Transitions, effects and transforms are all open game. More on that further down in the article.

Disadvantages

Fonts can be large in size

A complex font can easily be 90Kb. That can be a hard pill to swallow if you simply want to use one specific icon.

No standards in place for key-binding

If you are under the opinion that TypeKit should offer icon sets as embeddable fonts, there needs to be some standards in place for what icons are in an icon set and what keys they are bound to. Otherwise switching icon sets could display unexpected icons.

Potential for tag-bloat

After playing around with embedding icons, it became clear that improper implementations could easily lead to ugly markup.

Multi-colored icons are a no-go

If you want to embed icons like famfamfam with various colors/shades, you’re screwed. CSS3 can give you some simple gradients, but beyond that this method is just not going to work.

Implementation

The following is a quick rundown on how I implemented the demo at the beginning of the article. I am not presuming that my method is the best or even a proper method at all. I would really enjoy seeing how others think the HTML/CSS should look for this use case.

The CSS is cut and dry. Most of us have seen this plenty of times. Snook goes into far more detail if you are interested.

@font-face {
  font-family: 'IconicStroke';
    src: url("iconic_stroke.eot");
    src: local('IconicStroke'),
       url("iconic_stroke.svg#iconic") format('svg'),
       url("iconic_stroke.otf") format('opentype');
}

I apply a class (perhaps too specifically) named ‘iconic’ for wherever I want to use the font-embedded icon. I set the display to inline-block to allow for CSS3 transformations.

.iconic {
  display:inline-block;
  font-family: "IconicStroke";
}

I then add rules for each icon where I use the content rule to inject the ASCII character bound to that specific icon.

.iconic.home:before {
  content: '!';
}

Lastly, in the HTML, I use an a tag, since it could also potentially be used as an anchor destination in certain situations. The use of the blank a tag is not necessary, but it seemed like solid method to create a tag exclusively for the icon when it needed specific styling.

<a name='home' class='iconic home'></a> Home

Using CSS3 With Font-Embedded Icons

Integrating CSS3 into font-embedded icons is the difference between this method and using images for icons becomes apparent. Below is a simple, yet not-so-aesthetic example of what can be done to a font-embedded icon with CSS3. This used to be the sort of thing that was completely relegated to Flash. With vector icons, we have full scaling flexibility — something that is far more powerful than we typically think. Note, you must be viewing this in Safari or Chrome to see some of the effects and the transitions.

Roll over this text to see transition

Below is the code used to implement this. No Javascript was needed for this.

.iconic {
	display:inline-block;
	font-family: "IconicStroke";
	text-shadow: 0px 0px 2px rgba(0,0,0,.33);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg);
	-webkit-mask-image: -webkit-gradient(linear,
		left top,
		left bottom,
		from(rgba(0,0,0,.5)),
		to(rgba(0,0,0,1)));
	-webkit-transition: all .3s ease-in-out;
	cursor: default;
	padding:10px 0 10px 10px;
 }

.iconic:hover {
	-webkit-transform: rotate(-10deg) scale(1.3);
	-moz-transform: rotate(-10deg) scale(1.3);
	text-shadow: 0px 0px 4px rgba(0,0,0,.5);
	color:#c00 !important;
}

This Concept is Worthwhile

There are many CSS techniques that come around which ultimately end up being gimmicky — this is not one of them. If implemented appropriately, this method could allow for more creative flexibility, all while using less bandwidth. I have taken the time to compile many of the icons in Iconic into a typeface in addition to creating a starter CSS file. This should give anyone who is interested in implementing this method enough to be on their way. I look forward to making the switch on my site and hope to see others do the same.