How to Change Header Icon Color?

Dev
21

For the header icons on the right side, in common-css of a theme or theme component:

.d-header .d-header-icons .d-icon  {
    color: <header icons color> !important;
    &:hover {
        color: <header icons hover color> !important;
    }
 }

For the hamburger icon in side bar menu mode:

.d-header .header-sidebar-toggle button .d-icon {
    color: <hamburger icon color> !important;
    &:hover {
        color: <hamburger icon hover color> !important;
    }
}

<header icons color>, <hamburger icons color>, <header icon hover color>, <hamburger icon hover color> = hex, color name or theme color variables. You can also specify background-color if you wish to change the icon background color.

Note: If you are using the hamburger drop down mode instead of sidebar, the first snippet for the right side header icons will also include the hamburger icon.

4 Likes