How to Use Font Icons in WordPress

WordPress 3.9 was released this week, and there’s one fun feature that I’m really excited about:

DASHICONS!

Once WordPress upped it’s game in the back-end by implementing Font Icons for all it’s navigation, it was only inevitable that that font icon library would have to expand to include more and more types of icons. Well, with 3.9 it just increased by 30 for a whopping total of 197 icons.

How WordPress Developers Can Use Dashicons for Plugins and Themes

Well, if you are a theme or plugin developer, you should care, for several reasons:

1. No one wants to be “that” plugin… you know the one. The one where it’s icon looks different than all the rest in the backend. Yuck! Use AJ Clarke’s (of WPExplorer fame) tutorial to use the Dashicons for your Custom Post Type menu item.
2. If you are a theme developer, you often want to represent a post format or some profile details with little icons. Well, you can register Dashicons to be used in the front-end as well. James Koster has a great write-up on that.

And now, the WordPress Developer site, hosts a great resource on Dashicon’s here.

How to Use Font Icons in WordPress

But even with 197 choices, often there’s still that ONE icon that’s missing. If you REALLY need a ton of icons, there are plenty of plugins for that, but I find it best to include them in your theme or plugin directly. Here’s a few really great resources and tutorials on doing that:

• Font Awesome is perhaps the most well known Font Icon Set. The great part about them is it can be delivered up via the Bootstrap CDN. Read WPBacon’s excellent piece on doing that here.
• Genericons are what Dashicons were modeled after, but it’s much more extensive. Here’s a great tutorial on implementing them in your theme.
• Probably the most powerful and flexible font icon tool out there is Icomoon.io’s Font Icon App. You can selectively choose icons from multiple available font icon packs, upload your own custom vector files to create icons, and then download the whole package with all the supported webfont types and a sample CSS sheet all in one neat little package. This is for the power-user. Just remember, with great power comes… ug! Nevermind. No one is creating paramilitary protests over icon fonts. Who are we kidding.
• One last go-to. Can’t talk CSS related things without a shout out to Chris Coyier. He’s got a really stellar font icon overview video right here. There you go… now you’re happy.

So there, all the resources you need to icon-font-ify all your websites! Have fun!