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.
You probably won’t be surprised to learn that it’s very easy to do.
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.
As Otto points out in the comments you can also load dashicons as a dependency of your theme stylesheet which is a neater solution.
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.
Now all you need to do is apply this to the
: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:
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.
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 🙂