Using WordPress 3.8’s dashicons in your theme or plugin

Screen Shot 2013-12-05 at 10.59.42

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.

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.

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:

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 :-)

39 thoughts on “Using WordPress 3.8’s dashicons in your theme or plugin

  1. Sweet – I’m glad there’s now a standard way to load icons in the dashboard.

    One small change to your code – you should use the admin_enqueue_scripts hook to enqueue the CSS seeing as though this is all in the dashboard :)

  2. That’s fantastic, I’d love to be able to cut out a request to font awesome. Their 4.0 update required a manual update without warning which was a pain. I know that won’t happen with a native icon font.

    P.S. Beautiful site here :)

    • I think FontAwesome will still have it’s place for larger projects but dashicons will definitely fill a gap and improve performance for smaller ones. It will be interesting to see how it evolves.

  3. Thanks for the intro to Dashicons Jay – looks useful.

    I’ll go with Ben and say what a great looking site you’ve got here.
    Glad I found you.

  4. No need to enqueue it on the front end either.

    • I’m pretty sure there is. Unless you’re logged in (dashicons are then loaded for admin bar).

      Would you care to elaborate? :-)

  5. I would love to see how to use this in the backend for my plugin!

  6. A better way to load them for the front end would be to have your dependencies set up for your theme’s own stylesheet.

    In your theme’s functions file, good theme authors should be doing something like this:


    add_action( 'wp_enqueue_scripts', 'themename_scripts' );
    function themename_scripts()
    wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array(), '1.0' );
    }

    ( Note: 1.0 is your theme’s version number, and you are using versioning properly to prevent your users from having caching issues after updates, right? Good. )

    Well, just change that enqueue line to this, in order to declare that your theme’s stylesheet needs dashicons too:


    wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array('dashicons'), '1.0' );

    And there you go. Now dashicons stylesheet loads before your stylesheet does, because your stylesheet is dependent on it. Simple and easy.

  7. Concerning WP Admin bar anyone knows what are the new parameters to define a menu item so that these Icons are included too ?

    I have mine customized with 2 new menu options, with WP 3.8 the responsive displays eliminate the text part from the menu items leaving only the icons.

    This means that my 2 menu items disappear in responsive display.

  8. Great explanation. Please note that you miss open brace after function themename_scripts()

  9. Well … I did it just like that :

    ‘menu_icon’ => ‘dashicons-images-alt’

    It works for me. It’s easy and clean :)

  10. I’m integrating these icons into a plugin I’ve published, but I’m wondering about backward compatibility.

    I’ve looked at the HTML header to see if there is a class that indicates whether dashicons are available or not. It looks like there isn’t, so I’m wondering if it’s possible to add a rule to my stylesheet that sets the “content” value based on the availability of dashicons.

    On a related note: was the dashicon font included in WP before 3.8?

    • Yeah backwards compatibility is tricky. In all honesty I wouldn’t bother. It’s going to be more trouble than it’s worth now, if you want to fully support pre-MP6 and MP6+ and it will only get more difficult and bloated going forwards.

      Even in WooCommerce 2.1 we’ve simply set the Required WordPress version to 3.8 mainly because there are going to be numerous UI quirks in < 3.8.

      If you’re desperate though, you can filter body_class (or admin_body_class), check if dashicons is enqueued using wp_script_is and then output a relevant class for your CSS to use.

  11. Are these available as png for those who don’t want to load extra stylesheets and fonts?

    • I don’t think so. But I think you will find that from a performance perspective you’d still be better off loading the css / font. Unless you’re literally using one or 2 icons.

      Even then, if you’re only using 2 you’d actually have to load 4 graphics for retina support… I don’t really see any reason not to use the font, especially as it’s already loaded :p

  12. Cool snippet. Will be using it for my next theme.

    Do you know how do I force the script to load the latest Dashicon script? Since the Dashicon comes with WordPress, it does make sense to use only the latest scripts as the later version will come with lots of new icons.

    ps: Too bad, I can’t seem to find what’s the latest version of the Dashicon script from the official Dashicon page.

  13. What is the fallback solution to make your theme continue to work on WP versions earlier than 3.8?

    • Hmm. I guess your best bet would be to query $wp_version and enqueue a different menu.css (or something) accordingly.

  14. Thanks for this post, James! I’ve found a number of the dashicons not displaying, as if WP is using only a subset of the icons. My solution was to download the font files from GitHub, and place them into the theme directly, calling those files in a @font-face declaration. A bit repetitive, since (theoretically) the font is already installed, but it’s how I got it to work.

    Also, I borrowed some of the advice given in Bulletproof Accessible Icon Fonts.

    Again, I’m getting some beautiful results. Thanks so much!

  15. Actually, all you need to do is add a class of “dashicons dashicons-admin-appearance” to your tag. (For the paintbrush.) The stylesheet and styles are already loaded.

    (I decided to try adding the class tags from the icons on the dashicons resource to see what would happen…and it worked! I am using a child theme of twentyfourteen on WP 3.8.)

    • Yup, that will work if you have access to the markup.

      Sometimes though, you might not have. Or you might not want those un-semantic classes in there. Despite their utility I don’t like them so much myself. Obviously this is different if you’re importing a .less or .scss file.

  16. Thanks for the article. I was looking for something different than an announcement but maybe you could help me out here. The dashicons are alreay implemented in wp but not showing in the backend nor in the frontend. I am using Firefox (current version). It’s a bit weird for me why it’s not working never had a problem with those icons.

    • Probably best to post this on the .org forums or even on trac if you think you’ve found a bug. I’ve no issues with dashicons here.

  17. For those who want to use this great font I’ve created a WordPress plugin that uses a shortcode to do that : http://wordpress.org/plugins/jm-dashicons-shortcode/

    I’ve added a full documentation for class names through the WP helper in edit posts and nav menus. Also available in widgets.
    It’s simple and hopefully it will help you.

  18. Hi,

    Thanks for this article. Awesome font ! I’ve made a plugin on my own which uses a shortcode to enjoy this brilliant font in frontend, hope this will help : http://wordpress.org/plugins/jm-dashicons-shortcode

  19. I would like to replace the text links in my header area custom menu widget with dashicons. I can get the dashicons to show up but it’s dashicon+text. I’ve tried adjusting the css to give text-indext: -9999x but then the dashicons appear but are not links. Any suggestions?

    (site is on developer machine running WAMP and is not live so I can’t link it for you)

  20. Hi thanks for the post. Really good process to use built in icons. I look forward to trying it out. I’ve recently created a font for a site, so far it looks great. I’m now trying to use it to replace the menu items in my primary navigation, so my site looks more like an app. Do you have a process for this you recommend? I’ve tried a few things and have had some success but feel like I’m not doing it the right way.

    Any guidance would be appreciated. Thanks again for your article :)

  21. I’ve just finished creating a little button generator which includes the dashicons to make it really easy to add to your posts/pages :)

    https://wordpress.org/plugins/forget-about-shortcode-buttons/

  22. Hey, thought I would pass-it-on… playing around with dashicons as social links. Here are a couple animation attributes you can add to dashicons:

    View here: http://www.theblogfarm.com/

    Play around see what you can do… all CSS.

    .dashicons, .dashicons-before {
    width: 32px!important;
    height: 32px!important;
    border: 1px solid #82881A;
    margin: 6px;
    padding: 6px 7px 8px 8px;
    font-size: 31px !important;
    font-weight: bold !important;
    line-height: 1.1 !important;
    box-shadow: 0 0 10px #333;
    -moz-box-shadow: 0 0 10px #333;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 50px;
    background: rgb(250,235,215); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(250,235,215,1) 0%, rgba(230,240,163,1) 45%, rgba(216,219,202,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(250,235,215,1)), color-stop(45%,rgba(230,240,163,1)), color-stop(100%,rgba(216,219,202,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(250,235,215,1) 0%,rgba(230,240,163,1) 45%,rgba(216,219,202,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(250,235,215,1) 0%,rgba(230,240,163,1) 45%,rgba(216,219,202,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(250,235,215,1) 0%,rgba(230,240,163,1) 45%,rgba(216,219,202,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(250,235,215,1) 0%,rgba(230,240,163,1) 45%,rgba(216,219,202,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faebd7', endColorstr='#d8dbca',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

    .dashicons, .dashicons-before:before {

    -webkit-animation: breathe 5s infinite ease-in-out alternate;
    -moz-animation: breathe 5s infinite ease-in-out alternate;
    -o-animation: breathe 5s infinite ease-in-out alternate;
    -ms-animation: breathe 5s infinite ease-in-out alternate;
    animation: breathe 5s infinite ease-in-out alternate;
    }

    @-webkit-keyframes breathe {
    0% { -webkit-transform: scale(.6);}
    100% { -webkit-transform: scale(1);}
    }

    @-moz-keyframes breathe {
    0% { -moz-transform: scale(.6);}
    100% { -moz-transform: scale(1);}
    }

    @-o-keyframes breathe {
    0% { -o-transform: scale(.6);}
    100% { -o-transform: scale(1);}
    }

    @-ms-keyframes breathe {
    0% { -ms-transform: scale(.6);}
    100% { -ms-transform: scale(1);}
    }

    @-keyframes breathe {
    0% { transform: scale(.6);}
    100% { transform: scale(1);}
    }

    /*

    .dashicons-editor-help:before {

    -webkit-animation: spin1 2s infinite linear;
    -moz-animation: spin1 2s infinite linear;
    -o-animation: spin1 2s infinite linear;
    -ms-animation: spin1 2s infinite linear;
    animation: spin1 2s infinite linear;
    }

    @-webkit-keyframes spin1 {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
    }
    @-moz-keyframes spin1 {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
    }
    @-o-keyframes spin1 {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
    }
    @-ms-keyframes spin1 {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
    }
    @-keyframes spin1 {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}

    content: "\f223";
    }

    */

  23. This is really very nice, though for the life of me I can’t understand why there are so few icons compared to the fontawesome.io base.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>