Change the background-color of the social media icons only on the Homepage.

I want to change the color of the social media icons only on the Homepage.

With this code I've been able to change the color of the icons –the "text":

body.homepage .header-actions .icon--fill svg {
      fill: #000000 !important;
}

But I want to change also the background-color of the icon –which I designed as a solid circle– to black with a 50% transparency. What's the code for that?

Link of the page: www.datingimmersion.com

Thanks

Try this:

body.homepage .header-actions .header-icon-border-style-solid {
  background-color:rgba(0,0,0,0.5);
}

51 minutes ago, Ziggy said:

Try this:

body.homepage .header-actions .header-icon-border-style-solid {
  background-color:rgba(0,0,0,0.5);
}

 

not working 😕

Add to Design > Custom CSS

body.homepage header#header a.icon {
    background-color: rgba(0,0,0,0.5) !important;
}

@tuanphan

Please see attached.  I am trying to get the Linked In icon to be in the Linked in brand colour blue.

It worked at first, and then for some reason stopped working!!!  Any ideas?

Best wishes and TX

@ValueResonance please can you share your website URL.

https://www.valueresonance.space/

I seem to have it working on mobile in the LinkedIn blue colour, but on desktop it stays pink!

I would be surprised if it was due to the cache because other updates go through within seconds no problem

Solved.  closed Browser, Cleared cache and it came bac eventually.  took a long time, maybe it was open in a window somewhere!