How to Change Header Icon Color?

Development
8

Thank you for the code.

I’m posting this in case someone runs into the same issue as me, but depending on the combination of colors you are using for your header and your icons (my header is a dark color), I was getting the right color combinations for my icons with the code you provided:

.d-header-icons .d-icon {
color: white !important;
}

.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}

However, whenever I clicked on the header icons and hovered out of them, the background reverted to a solid white color, which did not work as my header is dark and my icons are set to white. So on hovering out of them (after a click), they would show as a solid white rectangle). To fix this, all I had to do was also set the state for “a”, not just “a:hover” as in the above posts (#93bb54 being the same color as my header):

.d-header-icons .d-icon {
color: white !important;
}

.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
} 

.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}

Voila!