How It Works

I Love/Hate Font Icons

Too bad they don’t love me as much as I want them to.

I really, really, love font icons and emoji. I love being able to express myself with an image. I delight in hearing Siri read me my latest text from my wife and say “smiling pile of poop” six times to inform me that the cats are being absolute shits.

But they have problems.

We use font icons because they scale well on different screen sizes, they’re flexible, they can be styled well, and they require only one resource to be loaded. For people like me, who are effectively monkeys with crayons when it comes to art or design, they’re perfect. I want Twitter in a theme? <i class="fa fa-twitter"></i> and done and done.

So what’s the problem? They’re not accessible. Oh you can make them accessible, but they’re not really easily done. Screen readers have a devil of a time with them. They’re also hard to add to. If I want to add a ‘new’ SVG icon, well I can just upload a new image and be done. SVG icons on the other hand have all the same benefits of font icons, and some more. But this isn’t to say that SVG is perfect.

As mentioned, adding new SVG icons is easy. Far easier than font icons. But that comes with a cost. Using them is not quite as obvious an intuitive as it might be. Just googling for ‘style svg with css’ presents you with a dizzying array of possibilities. This gets worse when you look into do what is (relatively) simple on font icons, like animation.

I’m not saying these things are impossible. In fact, you can do far more with SVG than you can with fonts. The problem is that it’s all still very dev heavy. Don’t believe me? Read Why and how I ditched icon fonts in favor of inline SVG. That post is something I agreed with every step of the way right until we hit this:

There’s a Ruby script that reads the optimized SVG files one by one and generates a Rails helper file with icon_xxxxx methods. These methods can be called from any view to insert the desired icon as inline SVG:

I have no problem with scripting solutions. I love them. They’re just not really simple-user friendly yet. A user knows “I paste a line of code in to include a font, I can use font icons with very little code.” By contrast, SVG is code heavy and comes with too many options.

Uploading an SVG icon to your server’s easy. You can’t do it in WordPress without a plugin to allow those media uploads, but if it’s in your theme folder it’s there.

Once you have the image on your server, you’ll want to call it. It’s an image but you don’t want to use IMG tags for this.

<object type="image/svg+xml" data="my-image.svg">Your browser does not support SVG</object>

or if I want to be clever

<object type="image/svg+xml" data="my-image.svg"><img src="my-image.jpg" /></object>

The idea is to have a fallback (see CSS Tricks’ complete guide to SVG fallbacks) so that people can see things if there isn’t an ability to show SVG because it was in an IMG tag.

In the name of security, browsers disable SVG script interactivity if you use an IMG tag. Interactivity means the stuff you want to do, like style it and make it move. Also some browsers won’t accept SVG in CSS if they’re in a separate file. Awesome.

There’s one other thing to note. SVG can dynamically create images on the fly.

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

Hey look, ma! No image files! Check out HTML5 SVG from W3Schools for more.

The thing you may notice with these examples, though, is that they get more and more complex as I trip down the line. And when I want to start adding color to things, I end up looking at the <svg> code more and more, and I just don’t find it friendly.

So until SVG sorts out how to be a little dumber for people, I’m going to keep using my icon fonts and (as best I can) properly attribute them a best I can for accessibility, and wait for the future.

2 replies on “I Love/Hate Font Icons”

Warning: I’m about to a11ynerd all over your comment section.

That being said, you can make font icons accessible. It just takes a little work. You have a couple of choices: 1. Hide the font character itself using aria-hidden=’true’
2. If the icon needs text, supplement with a hidden text alternative Toggle Grid Mode or make the text visible, and the icon supplemental.
Icons that need text are those that are not strictly ornamental, like icons for your social networks, for example. If you want a really tricked-out solution to font icon accessibility, see this:

Comments are closed.