Using Font Icons (Dashicons) For Custom Post Types in WordPress 3.8

Using Font Icons (Dashicons) For Custom Post Types in WordPress 3.8

I don’t know about you, but I f*cking love the new WordPress 3.8 admin design. Everything just looks so much better and modern. One of the changes has been the addition of font icons (also known as Dashicons) which replaced the older way of adding icons for the dashboard tabs which was done via images (eww). These new icons look really good and keeps the admin menu very congruent, so why mess it all up with ugly custom post type icons?

Some of my older themes were using icons by Yusuke Kamiyamane which you can find here. And although these icons were commonly used by theme developers and looked pretty decent in the old versions of WP, they look like poop in the WordPress 3.8 dashboard.

So if you are wondering how to make your custom post type icons look good in 3.8 and make use of the Dashicons, the good news is that you can and it’s very very easy!

Using Dashicons For Custom Post Types

When you register a new custom post type, simply set the menu_icon argument equal to the CSS classname of the Dashicon you wish to use.

When you visit the Dashicons landing page simply click on any icon you would like to use and you’ll see the classname at the top next to the icon so you can copy and paste it.

Example:

// Register a new custom post type named "Portfolio"
register_post_type('portfolio', array(
 'public'    => true,
 'menu_icon' => 'dashicons-portfolio',
 'label'     => __( 'Portfolio', 'local' ),
);

Screenshot:

Below is a screenshot of the back-end for my Thunder WordPress theme showing you various custom post types that are using the Dashicons. Looks good huh??

wordpress-dashicons-screenshot

Visit Dashicons

Notice: It seems that there isn’t any fallback for WP versions under 3.8, so if you use the Dashicons for the custom post types it will show a broken image in older version of WordPress – this isn’t really a problem because people should update, but thought I’d point it out.

AJ Clarke
Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.
AJ Clarke
This article has 26 comments
  1. Dean says:

    Such an easy to implement solution for customising the post type ui. Already updating my themes. Love these icons! Thanks for sharing!

    1. Sunil says:

      Thats awesome AJ!

      I found this post when searching for a way to include icons in my custom post type defintion. I had no idea about dashicons.
      I’m creating a Events plugin. Turns out that there is an dashicon called ‘dashicon-calendar’. Simply passing that string into the parameter ‘menu_icon’ allows the calendar icon to be output in the dashboard sidebar.

      Thanks!

      1. AJ Clarke says:

        Awesome! Share the calendar plugin when you’re done so I can check it out ;)

        Admin
  2. Gil Hamer says:

    I have been struggled a lot using the old method of using special function and custom icons to customize the CPT menu icon. this makes it whole lot faster and cleaner.
    Thanks for the tip!

  3. Wasil Burki says:

    I followed the instructions but the CPT icons don’t show in WP 3.8. Please help!

    1. AJ Clarke | WPExplorer says:

      There is no way I can help you without actually looking in the backend…Unfortunately we aren’t available for hire at the moment.

      Double check that you are using the correct names and maybe inspect it with Firebug to see what’s going on. Also make sure that the icons aren’t being overwritten possibly by another function.

      Admin
  4. jjschaeffer says:

    Hi A.J.,
    Great post !
    in your awesome Pytheas theme, you’ve Font Awesome, but version 3.8, with few icons, compared with Font Awesome 4.0.3
    Could dashicon replace this ?

    1. AJ Clarke says:

      Can’t do…Dashicons load in the admin side of WP (and there are less dashicons also). I’ll update FontAwesome in that theme as soon as I can, it’s gonna take a while though and I have about 30 themes using FontAwesome so it isn’t a super quick task (the new version uses different classnames).

      Admin
  5. Jean-Jacques Schaeffer (or gigi3351) says:

    thanks for your answer, I can imagine with 30 themes, that will be a lot of work !
    See my website, on Pytheas theme…
    I can provide you, my, fr-FR.po for this theme, if you send me, an email to do that.

    1. AJ Clarke says:

      That would be awesome. I’ll email you directly at the email provided in the comment. Thanks!

      Admin
  6. AbuBakar says:

    I used this as a fallback

    <?php
    global $wp_version;
    if( version_compare( $wp_version, '3.8', '

    1. AJ Clarke says:

      Your code didn’t go through the comments ;(

      Either-way, I’m not a huge fan of fallbacks when it comes to WordPress, people should ALWAYS update to the latest version, there are no excuses ;)

      Admin
  7. AbuBakar says:

    yup no excuses at all but we have to count in lazy ones :) and world is full of them

  8. Gabriel S Merovingi says:

    Thank you for this! I noticed it can also be used with the add_menu_page function which is awesome.

    1. AJ Clarke says:

      Yes. But it’s ok because they haven’t altered the style.css in the theme and it is GPL. That said, people should always download the theme’s straight from the developer’s website to make sure it’s the latest version. I tried the download that guy offers on his youtube video and its REALLY outdated.

      Admin
  9. JuaraThemes (@juarathemes) says:

    Hi AJ, is there some official documentation for dashicons? like cheatsheet for the icon list and come with preview?
    Just like fontAwesome website.

  10. CFX says:

    Awesome! Thank you, now I don’t need to add custom admin CSS to do this!

Leave a Reply