I really like Font Icons and I’m willing to bet there was a period of time you did to, way before we had the Internet on our phones. Do you remember Wing Dings?
When I was a kid they were awesome. We used them to print up secret code letters in the ’80s, using the basic letter shift kind of cypher. Wing Dings is, at its heart, a font icon. This means it’s a font that uses shapes instead of letters, but unlike Wing Dings where I could type “cat” and get “hand arrow flag”, a modern font icon has special content terms like “f401” that you use instead. Of course those are hard to remember, and we all like to use shortcuts, which I’ll get to in a second.
The reason I love them is that I am a monkey with a crayon when it comes to design. Did you ever try to make an image that, when you rolled the mouse over it, it changed color? Like the official Twitter image you wanted to spin when the mouse hit it? We used to do that with images, CSS sprites, and combine all the images into one large image, load it once, and then with the magic of CSS have different bits load at a time. Sprites and Bitmaps can do that, but adding in new icon to the set took time and Photoshop and if you’d lost your designer in the meantime you were out of luck. Font icons lower the bar and make it easier for everyone who can’t design.
Font icons are easy to style. You can resize, recolor, flip, shadow, and apply rollover effects with just some basic CSS. They also scale well which means they were pretty much born for retina. No matter the size of your device or the quality of your screen, the font icon will never look jagged and blurry.
So how do we use them? It’s only three steps and the third is beer. Seriously, though it’s really that simple. Include the font family, just like you would a google font, or do it locally. Call the icon, show the icon.
- Include the font in your site
- Call the icon you want with the span html tag
<span class="genericon genericon-aside"></span> <i class="fa fa-beer"></i>
- Drink a beer [ficon family=FontAwesome icon=beer color=brown size=3x]
That beer is a font icon by the way.
There are plugins, for most of the popular ones, that will let you insert using shortcodes. Those are easy to use for when you want to put an icon in your post content. I wrote two of them, Genericon’d (which brings Genericons to your site with shortcodes) and Fonticode (which lets you apply shortcodes to most of the major font icons, provided they’re already included in your theme or another plugin). But wait, there’s more!
As I mentioned, you can use them in CSS, and by that I don’t mean you can style them. What I mean is you can use CSS to call a font icon and put it in a menu, which is a little trickier since you need to use the before call, and that is a little weird. I talked about how to do this before in ShareDaddy Genericons (which is now useless since Jetpack went and did that for everyone) but the point is that you have to mess with CSS and it looks like this:
div.sharedaddy .sd-content li a::before {
font-family: 'Genericons';
font-size: 16px;
color: #fff;
}
div.sharedaddy a.sd-button>span {
display: none;
}
div.sharedaddy .sd-content li.share-twitter a::before {
content: '\f202';
color: #4099FF;
}
As an example, this is a pretty basic one. The magic sauce here is that I say “Before all my links, use the font family Genericons with this size.” And then “Before Twitter, I want to show the content \f202″ That happens to be Twitter’s icon. The color I used is also the official Twitter blue. You can get even fancier and I suggest reading Justin Tadlock’s post on Social nav menus.
The obvious next question is where can you find font icons? Here’s a non-exhaustive list.
- Genericons
- Font Awesome
- Libricons
- Octicons
- Glyphicons (Halflings is GPL, the rest are CC and proprietary)
- Icomoon (free version is GPL, the rest are proprietary)
I will note that some of these are not GPL, so it’s on you to check the licenses for what you want to use them for. Like Glyphicons? You can use their Halflings font freely, but not the full Glyphicon pack. Similarly, Icomoon has a couple font packs that aren’t free and for full distribution, but does have one you can use. So please, please, be careful and be aware. You can use the non-GPL ones on your own site (most of the time) but you can’t package them in a theme or plugin.
Before someone asks, let me talk about Dashicons. That comes in core, so you don’t need to worry about including that. I wouldn’t use it on your site, since it’s meant for the WP Admin back end and nothing more and the size is a little off because of that. You can totally use it on your plugins. So instead of making an image, you can use a Dashicon to be the icon on the menu sidebar. This may one day change, but not today.
All this love doesn’t mean everything’s awesome. There are some issues, like how Icon Fonts Are Ruining Your Markup. And you should read Ten reasons we switched from an icon font to SVG for some great reasons not to. You also need to keep in mind accessibility, like screen readers, and for that check out Bulletproof Accessible Icon Fonts.
Nothing’s insurmountable, and the easy of a font icon without having to mess with GIMP or Photoshop or pretend I know what I’m doing with art is worth it all for me.
