in Tips, Tutorials, WordPress

Stop Including Icon Fonts You Don’t Need

WordPress Theme & Plugin developers: stop it. Sure, I used to do it. I’m not ashamed. I don’t hide from the truth. However, I’ve realised my mistakes and so should you.

Screen Shot 2014-06-21 at 6.40.42 PM

Since WordPress 3.8, the super useful and awesome Dashicons has been included with every copy. You can find it’s home on GitHub here too.

There are almost 200 icons included with it, enough to cover almost every icon-requiring situation you’ll get into. You can easily include them on the front-end and back-end of any site, just by including the CSS for an icon or adding it to a span/div/etc.

For example, just add something like this to your site:

https://gist.github.com/bryceadams/f5112cd6858a1f8317d6.js

With no extra resources being loaded, an icon’s being displayed! Awesomeness.

Update: Devin reminded me in the comments below that most themes don’t actually enqueue Dashicons in the front-end (while a theme like Twenty Fourteen does, your standard run-of-the-mill theme probably won’t). That’s alright, just enqueue it yourself!

https://gist.github.com/bryceadams/84ea0a2bfeb881f8e34e.js

James Koster’s written a great article about using Dashicons in your theme or plugin too. Definitely check it out.

Of course, you’ll often be faced with situations that call for more icon fonts, and that’s ok. But if you can get away with using the included Dashicons set, go for it.

Keep in mind: Users will need to be on WordPress 3.8+ to see the icons! However, you should just include a fallback that will load the dashicons for 3.7 and under.

Write a Comment

Comment

  1. Dashicons don’t use any extra resources in the admin panel, but that’s not true for the front-end (unless you’re logged in to the site and the admin bar is showing). Themes still need to enqueue dashicons.

    So, for themes you’re still best off choosing an icon font that works best for you. Even better, use a tool like http://fontello.com/ to select only the glyphs your theme actually uses and package a custom icon font to load.

    • Oh, good point. I had TwentyFourteen activated so it slipped my mind that it was that specific theme enqueueing it. Completely agree about http://fontello.com – no point including something like FontAwesome just to use 3 or 4 icons in your plugin/theme.

      PS. Thanks for stopping by Devin 🙂