I have seen some example of changing custom Post Type icon colors but nothing for using wp builtin dashicon. I also tried to do this

.dashicons { color: red; }

which is only changing color of dashicons in the page not in the menu, besides I just want to change A custom post type dashicon color not all of them (to be highlighted). For example for the CPT Movies only. Can you please let me know how to do this


The menu icons are displayed via CSS in the :before pseudo-element of the .wp-menu-image.dashicons-before wrapper. So first your code needs to target .wp-menu-image:before, or .dashicons-before:before (not .dashicons).

This won't be enough though because default styles in WordPress are using some more specific selectors. Though you could override them with !important and make all icons red with this:

.wp-menu-image:before { color: red !important; }

(Note that this should be avoided whenever possible.)

But this is not what you are asking for here, you want to color only the icon for one specific custom post type.

You'll need make your selector more specific to target your custom post type menu item.

If your custom post type slug is cpt_movie, this will do:

.menu-icon-cpt_movie .wp-menu-image:before { color: red; }

You may also want another color when you mouse-hover the menu item:

.menu-icon-cpt_movie:hover .wp-menu-image:before { color: green; }

Related quick tip: play around with your browser's DevTools, it makes it really easy to work out which elements/classes you need to target in css ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.