Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme.Learn More

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

December 26, 2017

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 showing what the dashicon icon would look like for the portfolio post type. As you can see it matches the default WordPress admin user interphase which is much better then having a custom image icon that doesn’t match.

wordpress-dashicons-screenshot

Notice: 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.

dashicons-post-types-wordpress-3-8
Article by AJ Clarke WPExplorer Staff
Published on: December 21, 2013
Last updated on: December 26, 2017
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

27 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!

    • 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!

  2. Distinctive Themes says:

    Brilliant 🙂 perfect timing too

    Thank you AJ

  3. 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!

  4. Wasil Burki says:

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

    • 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.

  5. 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 ?

    • 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).

  6. 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.

  7. Richard says:

    A short comment just to say thank you! 🙂

  8. Morgan Estes (morganestes) says:

    Just what I needed today. Thank you!

  9. AbuBakar says:

    I used this as a fallback

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

    • 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 😉

  10. AbuBakar says:

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

  11. Gabriel S Merovingi says:

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

  12. seba says:

    Awesome tutorial. Thanks for sharing!

  13. Julien Maury says:

    Awesome font ! I’ve made a plugin which uses a shortcode to use this brilliant font on frontend, hope this will help : http://wordpress.org/plugins/jm-dashicons-shortcode

  14. Todd says:

    youtube.com/watch?v=8bOZvTx8mx0 is this your theme??

    • 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.

  15. 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.

  16. CFX says:

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

  17. John says:

    Thanks! This saved a lot of work!

  18. PedroC says:

    perfect! thanks!

Leave a Reply

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

Learn how your comment data is processed by viewing our privacy policy here.