How to Use Dashicons for Custom Post Types

WordPress 3.8 “Parker” has officially been out since December 12th, and here at WP Smackdown, we unanimously love the new admin design. We loved the design so much, we couldn’t wait for the release and happily installed the MP6 plugin long ago.

One of the key design elements that we like is the use of the Dashicons next to each post type. Instead of having to dig around in our plethora of icons to find the perfect 16×16 icon for our custom post types, we can now use Dashicons. We’re big fans of using clean, flexible icons with easy implementation instructions. Also check out Font Awesome, which was designed for Bootstrap, if you haven’t seen them before.

Add a Dashicon class to menu_icon

Dashicons are easy to implement because they come pre-installed with WordPress core. When you are registering a custom post type, find the parameter 'menu_icon' => ''. In the single quotes on the right, just add the CSS class of the Dashicon you’d like to use. If you have a custom post type called “Projects,” and would like to use a star as the icon, you’d simply write the code like this:
'menu_icon' => 'dashicons-star-filled'

Large Library of Dashicons

Here’s a link to all of the current Dashicons. To find the CSS class of the Dashicon you’d like to use, just click on the icon, and then click the “Copy HTML” link. It’s the secondary CSS class listed after “dashicons.”