It is possible to change colors of DashIcons with CSS? I couldnt get it to work.
2 Answers
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.ToduaDec 30, 2017 at 14:07 -
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.