Change Color of Social Icons in Page Builder

Pages
1

Hi All,

I just recreated the header & footer of my website for the search results page of my Answers experience. However, I want to make some final styling adjustments within the page builder template before I go live.

Is it possible to change the color of the social icons in the Footer Module? If you go into Edit Module Styling, the following code is entered by default:

.social-icon { align-items: center; display: flex; justify-content: center; height: 45px; width: 45px;

.icon-img {
    filter: invert(1); // make it black
}

I tried adding color: #00866F to both the .social-icon element and the .icon-img element, but the color did not change. I read about Invert filters here, but Iā€™m unsure that a filter will allow me to change the color of the icon.

Thank you,
Austin

2

Hey Austin,

There may be an easier way to do this, but you can use additional CSS filter functions to adjust the color of the social icons. Based on this stackoverflow thread, I found this tool where you can put in the target color, and it gives you the CSS filter functions that will adjust a black icon to the desired color.

In this case, I found that replacing

.icon-img {
filter: invert(1); // make it black
}

with

.icon-img {
filter: invert(41%) sepia(35%) saturate(2131%) hue-rotate(135deg) brightness(83%) contrast(102%); // make it #00866F
}

got the results you were looking for.

Hope this helps, and definitely interested in other solutions!

Thanks,
Nathan

1 Like
3

I found that if you delete out what is currently there by default for .icon-img and replace with

.icon-img {
    color: white;
}

that also works. At least it worked for me.