Icon Fonts Are Ruining Your Markup

Icon fonts are great. They’re more scalable than PNGs, they’re re-colorable in CSS, and it’s easier than ever to create them. But most of us are using them wrong, and it’s ruining your markup. Recognize this?

<span class="icon icon-calendar"></span>

This is fast becoming the de-facto standard syntax for inserting icons in your webdesigns. No need to fiddle with weird glyphs. No CSS needed to insert icons, even.

No CSS.

Hold up. The promise of CSS was that we could separate presentation from markup. We could create standardized, semantic and sensible markup, that could then be completely re-skinned solely by replacing a stylesheet. That was the whole point of the CSS Zen Garden. By using nonsense spans with verbose classes, that’s out the window, all in the name of convenience. I too have been bitten by the icon-font bug. I’m into them. I think it’s so great that I can re-color icons with a line of CSS. I like how they zoom, and how they have broader support than SVGs.

But they’re not SVGs. They’re not images. We shouldn’t pretend they were, or that they could ever be as accessible as images are.

Theoretically an icon from a font could be inserted in a semi-accessible way by outputting the actual glyph in the code to ensure copy/paste-ability. You’d also have to make sure to only use an icon that already existed in the unicode-table so screen-readers could make sense of them, thus severely limiting your options as a designer. Need a hamburger menu icon? Sorry, doesn’t exist in the unicode table. Pretty much all the benefits of using an icon font would be out the window at this point.

Rewind for a bit. Take a deep breath and think. Why are you using an icon font in the first place? Easy HiDPI and CSS colorability? Easy to show at multiple sizes? Fair enough.

Now pretend icon fonts didn’t exist, what would you do instead? Use a PNG or GIF as a CSS background, right? You’d treat the graphics as presentational elements. Visual aids. You’d keep it separate from your markup. You’d be able to reskin your whole site with a single stylesheet. You’d keep the markup as simple and semantic as that of the CSS Zen Garden. Hopefully you’d be a good person and worry about accessability where it mattered most: in the structure of your markup.

You can still use icon-fonts and have sensible markup while keeping the presentation separate. But doing so means you can’t rely on those bundled CSS helper classes. You have to do it manually; put in the work. Don’t treat icon-fonts like images. Pretend they’re sprites and keep them in your stylesheet. You’ll thank me.

Genericons

An Automattic 20% project of mine just graduated. Genericons is an icon font with emphasis on blogging. It’s GPL, so you can bundle it with WordPress themes. What makes Genericons special is that, like its inspiration: Githubs Octicons, the font was designed with a precise pixel grid in mind. That means if the icons are shown at appropriate font sizes (in this case, 16px, 32px, and similar multiples), the icons will render perfectly crisply. Thanks to Sheri and Takashi for contributions.

An icon gift to 1Password [Updated]

I’m totally in love with 1Password for managing my password portfolio, but like Garrett Murray, I really loathe the icon Agile Bits chose for their Chrome extension.

So I made a replacement. Here’s before and after:

1password

So please, dear Agile Bits (ping @agilebits, @1password), take this icon and run with it (or create your own improved one), I give it to you free of charge:

1password_icon

Please use it, and I’ll love your software even more.

[Update]: A beta version of 1Password finally has an improved icon:

new_1password

Here’s An Idea: The Icons For Developers Program

Android and iOS devices have exploded in app usage over the last few years. Both of these operating systems bring app icons front and center. Large finger-friendly icons invite us to start a phone call, play a game or jot down a note. It’s all very polished and pretty.

Android_icons

Well it’s not all polished and pretty. Some apps, while they may be superbly built and infinitely useful, their icons aren’t very pretty. Perhaps the developers simply didn’t find the icon important, perhaps they lacked the resources to give an icon the attention it deserves. The result may be an app that doesn’t look as pretty as it is useful.

Here’s an idea: those of you who possess the time and skills to build a proper icon for your aesthetically orphaned but still favourite app — why not actually make that icon and offer it to the developer for free? In fact, why not have a central website, called “The Icons For Developers Program”, where designers can submit icon replacements to developers? Hell, why not let developers put out their own requests for icons? It should all be free in the name of pretty.

Has this already been done? Could it be useful, or would it simply fullfill a niche desire? Your thoughts are welcome.

New Opera Icon [Update]

New_Opera_icon

According to Jon Hicks, the Opera browser is set to get a new icon, designed by Oleg Melnychuk. It’s a little happy guy in a red jumpsuit, sporting the a capital O on his tummy. Certainly an improvement over the old one, while still not redoing the entire logo (which I’m sure the darkly suited guys at Opera must’ve opposed because they’re scared of a re-brand).

[Update]: It’s not a happy little guy in a jumpsuit. It’s still a red, capital O. It’s just a tweaked O. Pity. (Thanks Alexander).

Real_new_Opera_icon