It is possible to change colors of DashIcons with CSS? I couldnt get it to work.

2 Answers 2


Yes, this is possible. Make sure your CSS selector is correct. You can target the specific HTML element or its ::before pseudo element and change colour with CSS. Can you post your HTML snippet of the element you want to change and the CSS selector you are using? Maybe you mean to change the colour inside WP admin area for all dash-icons? In that case:

.dashicons { color: red; }
  • hm, i thought i have tried that, but seems i didnt. thanks, it works, but needs to be done with ::before.
    – T.Todua
    Dec 30, 2017 at 14:07
  • 1
    You are welcome. Glad I could help out.
    – DekiGk
    Jan 2, 2018 at 10:41

The correct way:

#adminmenu div.wp-menu-image:before {
    color: #000; <-- here

#adminmenu .wp-has-current-submenu div.wp-menu-image:before {
    color: #000; <-- here

And to make sure you get the hover state of the selected submenu

#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
#adminmenu .current div.wp-menu-image:before,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
    color: #000; <-- here

All of the dashicon css and the related wp-menu-image css is in the admin-menu.css sheet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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