Using WordPress 3.8’s dashicons in your theme or plugin

WordPress 3.8 is just around the corner (scheduled for release in December) and with it comes a brand new admin interface built upon the ‘top secret’ MP6 plugin.

In this re-skin a lot of attention has been paid to making all graphic elements HiDPI (retina) friendly by use of an icon font. The benefits of using a font instead of bitmaps for this purpose has long been discussed & accepted so I won’t go in to details on that here. All you need to know is that Icon Fonts are awesome.

What this post is here to do is explain how you can use this new utility in your WordPress themes or plugins, specifically on the frontend.

Enqueue Dashicons

You probably won’t be surprised to learn that it’s very easy to do.

https://gist.github.com/jameskoster/7803271

This snippet will load the dashicons.css file in the site header. That will set up the @font-face declaration allowing you to reference it in your other stylesheets.

Update 13/12/2013

As Otto points out in the comments you can also load dashicons as a dependency of your theme stylesheet which is a neater solution.

https://gist.github.com/jameskoster/7942759

Using the icons

Now that you’re loading the dashicons css, it’s time to implement some icons! At this point it’s you should take a look at this excellent dashicons resource by Mel Choyce. All the current icons available in dashicons are listed here plus a handy tool to grab the glyph reference which you’ll be needing for your CSS.

So, say you wanted to add the paintbrush icon before a link. Click the glyph, then click the ‘Copy CSS’ link which will open a dialog box containing the CSS code required to display that icon.

http://melchoyce.github.io/dashicons/ provides a handy tool for grabbing glyph references
http://melchoyce.github.io/dashicons/ provides a handy tool for grabbing glyph references

Now all you need to do is apply this to the :before (or :after) pseudo class of the element you want to be prepended or appended by the icon, and specify that it uses the dashicons font-family. This is done like so:

https://gist.github.com/jameskoster/7803372

The result

Hey Presto! Obviously you can now go to town on this by applying colors, shadows, animations, hover events and all other kinds of CSS goodness.

Adding icons is easy!
Adding icons is easy!

So there you have it! Adding retina friendly icons on the frontend of your theme or plugin is now a piece of cake, just as soon as WordPress 3.8 arrives 🙂