How to change DASH-ICON color with CSS?

Question

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

Answer 1

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; }

Answer 2

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.