Tutorials WordPress

How to Use Dashicons for Custom Post Types


Written by

Joanna Weber

Reading Time

2 minutes

If you buy something from one of our links, we may earn a commission.

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

Dashicons Copy HTML Link
Click on the “Copy HTML” link, and grab the 2nd class after “dashicons.”

Joanna Weber

Joanna is a co-founder of WP Smackdown, and will forever be a friend of the site. While not a current member of our team, she resides in Richmond, VA with her beautiful family.

Leave a Comment