1

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

5

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; }
| improve this answer | |
  • 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 '17 at 14:07
  • 1
    You are welcome. Glad I could help out. – DekiGk Jan 2 '18 at 10:41
1

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.

| improve this answer | |

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.