Dude, You've Been Font-I-Con'd!

"Sweet!"

Font Icons. Everyone here is on WordPress 3.8 or later, right? So you're actually using Font Icons right now, every day, when you log in to WordPress and look at that lovely new MP6 designed admin dashboard. But there's way more to Font Icons than just those basic uses, and I'm going to teach you why and how and why NOT to use them today!

Mika Epstein

aka Ipstenu

WordPress.org:

Support Forum Moderator

Plugin Reviewer

Core Contributor

Beta Tester

Trainer

... Half Elf

DreamHost

WordPress Specialist

... and Manager

WordPress Trainer

De-Hacker

Dedicated WP Resource

... Half Unicorn

I'm one of those WordPress busy bodies out there, and I wear a lot of hats. I write plugins, I debug everything, I beta test... and DreamHost pays me to do those things as well as wrangle our support and try to train everyone there about WordPress, what it is, why it's cool, and by the way have you had the Kool-Aid yet?
[MORE HERE]

A font "icon?"

Font Icons are ... well ... fonts! Remember Wing Dings? When I was a kid they were awesome, and we used them to print up secret code letters. This was pre-internet. A font icon is a font that uses shapes instead of letters, but unlike Wing Dings, where I could type "cat" and get "hand arrow flag", a font icon has special content terms like "f401" that you use instead.

Why bother?

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 a NEW icon to the set took time and Photoshop. Font Icons lower the bar and make it easier for everyone who can't design. *raise my hand*

Use 'em the easy way!

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. In this slide, there's a beer icon and yes, it's a font icon!
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. But wait! There's more!

More? Yes! You can use them in CSS, which is a little trickier since you need to use the before call, which is a little weird. So in the example above, and I promise this is the ONLY css code in the talk, I decided I wanted to use Genericons to replace ShareDaddy's images. I want you to know, Jetpack now does this out of the box so you don't need to, but as an example, this is pretty ... explanatory. 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. Oh and I picked Twitter Blue for the color.

Let's show off!

No, really, this is just to show off. This page is all done with Font Awesome. It's all CSS and HTML, and yes, that means those are font icons. Moving. Cool, right?

Where can we find font icons?

You're sold? Great! So you wanna get 'em? Here are some of the most popular! 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. I hate even having to mention this in this way, but I want you to be safe!
I mentioned Dashicons. That comes in core, so you don't need to worry about that. I wouldn't use it on your site, though, since it's meant for the WP Admin back end and nothing more. You can totally use it on your plugins, though!, instead of making an image, you can use a Dashicon to be the icon on the menu sidebar!

Everything is awesome!

These two articles, and remember the slides are online so you can get the links from that, talk about the pitfalls. they're not perfect. They've got some flaws and some tricks you should keep in mind. But... I still like them enough to keep using them! And again, remember GPL. Not all icons are usable in WordPress for everything. I'm not your lawyer, please do the legwork.

THE END

I love Font Icons. I really do. I flipped when I saw Genericons and that's why I made the plugin Genericon'd. I've also been working on a Generic Font Icon plugin, that lets you use the ones built into your theme. It's being tricky, but I do plan to release it. The point here is that I do love them because they make my life easier. Of course, they're not perfect. Nothing is. But they make me way happier than sprites, and that's an elf fact you can take to the bank.
Thank you.