5 Use Cases for Icon Fonts

The following is a guest post by Tim Pietrusky. Tim knows this site has long been a proponent of using fonts for icons, and had his own interesting use cases to share. While creating the demos, to make things easier for himself, he created a free service for icon font hosting. It makes for a nice gift to the community as well. I'll let him tell you about it...

Icon fonts are great:

You can CSS the crap out of them and they don’t mind

They look good on any display or resolution

There is only one HTTP request for any size set of icons

Let's look at 5 typical uses cases for icon fonts.

Before we start

We won't be using any vendor prefixes to keep the example code clean and readable. We will be using things like animations, transitions, and transforms, all of which require vendor prefixes to ensure the best browser support. How you want to deal with vendor prefixes is up to you.

As you will see in the examples, I use the icon fonts hosting service weloveiconfonts.com. This is my own project. Here’s the story: I wanted to write an article about icon fonts and searched for a free icon fonts hosting service, but found none. So I created this service to be able to write this article.

1. CSS Loader

There are quite a few awesome, pure CSS loaders out there and you can even create your own at cssload.net. Another way of doing this is with icon fonts. You can use a character that looks like a loading symbol and animate it with CSS.

This is the basic HTML. The first three loaders are children of div.wrapper and and single elements. The forth (div.complex) is a combination of two icons.

The last loader (div.complex) combines two icons and stacks them on top of each other. The first child is the devil element (using the animation named rotate) and the second child is the spin icon (using the animation named scale).

2. SocialCount meets Style

People love using social sharing buttons on their sites to make it easier for visitors to spread the word. But when you combine Facebook, Twitter and Google+ you are facing an 309KB empty cache load size. That’s where the SocialCount jQuery plugin comes in. SocialCount is progressively enhanced, lazy loaded, and mobile friendly.

The default styling is simple and the iframe that contains the buttons is tiny. Let's enhance these buttons with some fancy CSS.

Editor's note: The CSS below is in SCSS format of Sass. A number of the following demos use this. If you want to see the regular CSS, you can visit the CodePen demo links provided and click the word "SCSS" in the header of the CSS editor to see the compiled CSS.

Add the default styling for list, list elements, pseudo elements, and the button. Instead of using a class to set the icon on the list elements, we change the content property of the element, creating a pseudo element.

3.1 Stuff You Love

The first examle is very easy. A heart instead of the default list-style and a special hover: The icon is moved to the right and the ::after pseudo-element gets the text of the data-attribute data-text.

3.3 Your account

A UI concept for a user menu. When you hover over a list element, the icon is moved to the right and the box-shadow fills the whole background. Every list element has its own icon based on the :nth-child selector and the content property.

4. Emocons.js jQuery Plugin

Emojons.js is a jQuery plugin which searches the content of an element for specific character sequences. All matches are replaced with a span and the HTML class of the corresponding icon. For example, a chat app:

There are a couple tricks you can use…-webkit-font-smoothing: antialiased or a slight text-shadow on your icons (i.e. .the-icon { text-shadow: 0 1px 1px rgba(255,255,25,0.50)}) These suggestions are hacks in my opinion in order to compensate for a poorly made icon (see Ben Dunkle @EmpireOfLight AKA WordPress’ Icon Maker)

There could also be a situation where the icon being rendered is actually a terribly made icon that was never designed to render on a pixel grid properly.

@Eliazer
Well…-webkit-font-smoothing is definitely not gonna work on IE, text-shadow will only work for IE10+, but most likely the problem with the icon not displaying properly at small sizes is because it was never designed on a pixel grid for the small size you’re after.

I personally dislike abusing fonts for this purpose. I fly with Firefox set to enforce my own fonts at all times since there are too many bozos on the net who try to subject me to their unreadably hideous font choices. However, this makes icon-fonts show up as the menu here where I see “k HOME 9 Forums Q Snippets p Galleries…” which is just confusing and ugly (especially since they don’t double as hot-keys to perform the actions).

If you want scalable images, use SVG for goodness sake. They’re resolution independent like icon fonts, they allow multiple colors, and degrade more pleasantly. The only issue I’ve found involves support for spriting with SVGs where a single download gets all the icons but then gets cropped.

Yes, I am a bit of an old-school tech wonk, and I do tend to fly with JS turned off for a multitude of reasons, though enable it selectively using NoScript/NotScript/ScriptNo for sites that don’t abuse it (I can count my whitelisted sites on one hand) or by visiting with a virgin browser session. Most drive-by web exploits are mitigated by using a script blocker as repeatedly noted on security bulletins. It also makes my web experience a lot less annoying, as I get to use the web on my terms. The extra battery life due to lower CPU usage is just a side benefit. That said…

You state that “icon fonts are better than image based icons”, but you don’t clarify whether you’re talking about raster images (gif/jpg/png) or vector images. I’ll grant you the benefits of icon fonts over raster image based icons as you mention the cost of 20 HTTP requests or 300k of image download.

However, my main point was regarding vector images (SVG) vs icon fonts, where SVG offers
– semantic benefits where it really is just an image, not an insertion of pseudo-content that relies on displaying in the right font
– multiple colors
– less visual breakage if your font/image server/CDN is down—you’re not left with random letters on the screen; it just does what browsers do when an image is unavailable (whether remove from the flow or display a placeholder broken-image icon)
– comparable size (a gzipped .SVG is on par with an icon font, for comparable content)

The only downsides to SVG come from support (older IE in particular), especially with regards to clipping when used as sprites.

Javascript disabling? What is this 1999? I think your distrust is unwarranted, but that’s just my opinion. If we all took this mindset, we’d still be doing layout with tables.

There are many different ways to use icon fonts, some more semantic than others. As far as “the CDN” being down, you can package your font and embed it within your site. If your site is up, your font is up. Your argument for SVG is fair, but in the real world we support IE, so this is not a viable solution for most projects.

You’re welcome to consider my distrust unwarranted, but a scan of vulnerability lists often shows that many exploits fail if JS is disabled. And if you listen to any of the security authorities (I recommend the Security Now podcast), most will say that letting arbitrary code run on your machine is a risk. Yes, it may be a minimal risk. However, NoScript allows me to be selective in which sites I allow/trust to run code on my machine. Additionally, my browsing experience is a LOT faster as I don’t have 30 tabs worth of sites all trying to run their various scripts.

I’m not sure how you jump from there to “still doing layout with tables.” CSS & JS are entirely independent.

@Tim Chase I agree in 100% with you. I also prefer to disable Web fonts all together and use only locally available fonts. More and more web sites try to use fancy fonts which may look awesome on the screen used by the designer but often are blurry and completely unreadable on my monitor.

Moreover, with all the talk about semantics (bashing tables for layout, etc.) it’s extremely hypocritical to advise using icon fonts for displaying icons.

Read that article. Watch the video. It explains the accessibility and fallback issues. If you have issues with blurriness on your computer and you don’t like them, fine, but there isn’t an inherent bad-ness to using them if you do it right.

Since any glyph can be assigned to any character (assuming you are in control of the font-definition), in the case of your site, I’d lean towards using HTML accesskeys combined with the icon-fonts, so that if the icon-font is not loaded, the displayed non-font-iconified characters have some value. In the case of your site, rather than “k HOME 9 Forums Q Snippets p Galleries…” which Firefox shows me, you might map your accesskeys so that “H” goes to “Home” and the “H” glyph is your “Home” glyph. Same for “F”orums and “S”nippets, then have your Forum and Snippet glyphs map to “F” and “S” respectively. Then there’s at least some semantic value to the (formerly) arbitrary letters that show up when the font doesn’t load—whether because the user-agent overrides the CSS (like I tend to fly with, as mentioned above in my root comment), differing-domain font-serving prevents (Firefox intentionally blocks fonts from different domains as a security measure), or server/network issues interfere.

There are certainly places where icon-fonts can be used without interfering, but it’s also easy to use them in ways that intrude on the experience.

I was introduced to Icomoon (which you list in the Further Reading section) earlier this year by a colleague and only in the last 2-3 months got the chance to use it. Wow – it is insanely awesome. Love how easy it is to use, that you can add in your own icons, and even save different sets.

Really nice examples, the Enhanced lists it’s the most interesting for me, i have just a question, about the 3.3 Your account case. Which is the techinque use to show the “get file” on hover. In the html you have get this file. I do not get the meaning. Thanks in advance your explanation

Some awesome ideas there.
I’ve started using icon fonts almost exclusively instead of bothering with crappy little png’s. Once you have the font set up it’s too easy to change icons around and try different things on the fly.
These little samples have given me some ideas!

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.