alternate social link icon in header on different pages and mobile

Site URL: https://www.pillarsresearch.org

I'm looking for advice on how to change the linkedin social icon for on mobile and on pages *other* than my homepage.

The linkedin social icon is on the header of my website. I find the default linkedin social icon on squarespace confusing, so I replaced it with a different icon. Basically, the default is white "in" text, and I replaced it with a white icon. Now the header on my homepage is wonderful. 

The problem, though, is that the header on the rest of my pages and my mobile navigation menu have white backgrounds, so you can't see the linkedin icon, because it's white on white. I'm trying to change the linkedin social icon to the mobile navigation and header on the pages other than the homepage. 

Can anyone help? I appreciate it SO much!

Don't remove any code in your current code

Add this to Design > Custom CSS

body:not(.homepage) a.icon.icon--fill[href*="linkedin"] {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Worked perfectly. thanks!

Hi - This worked on desktop but not on mobile. Do you have any suggestions? 

Also, do you know how to change the color of the "contact us" button on the header? I know how to do it on mobile, but not on desktop. 

Thanks so much.

On 5/18/2022 at 8:35 AM, smotheredbutta said:

Hi - This worked on desktop but not on mobile. Do you have any suggestions? 

Also, do you know how to change the color of the "contact us" button on the header? I know how to do it on mobile, but not on desktop. 

Thanks so much.

It looks like you figured it out?