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.
// Register a new custom post type named Portfolio register_post_type( 'portfolio', array( 'public' => true, 'menu_icon' => 'dashicons-portfolio', 'label' => __( 'Portfolio', 'local' ), );
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.
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.