Custom Social Links Colour Issue

Site URL: https://rafida.org

Hey,

We've added 3 custom social link icons on our BRINE website.

The icons are fine when there is an overlay behind the icons. They appear white with no issue. But when there is no overlay (and just a plain white background), the regular social link icons change to gray, but the 3 new custom icons remain white.

Two bits of code I'm using have been supplied below, and I've added screenshots showing the issue.

Website access:
rafida.org
pass: lastphasetesting3

Any ideas?


-----------------------------------------------------------


I adding the below code to custom CSS to change the colour, but the colour I pick only changes the standard icons and not the 3 custom icons.

  .tweak-social-icons-style-regular .SocialLinks-link-icon{
  fill: grey;
  }
  .tweak-social-icons-style-regular .SocialLinks:hover .SocialLinks-link-icon{
  fill: grey;
  }
  .tweak-social-icons-style-regular .SocialLinks:hover .SocialLinks-link:hover .SocialLinks-link-icon{
  fill: grey;
  }

I've used the following code to add the 3 custom social icons:

.SocialLinks-inner a:nth-child(5){
  content: url("https://static1.squarespace.com/static/5e4d565f9a543a4fb8ddc540/t/5f168b01b9ec1e5fe976efe3/1595312897641/4th.png") !important;
}
.SocialLinks-inner a:nth-child(6){
  content: url("https://static1.squarespace.com/static/5e4d565f9a543a4fb8ddc540/t/5f16fa9a377d4a7f30b3e370/1595341466544/whatsapp2.png") !important;
}
.SocialLinks-inner a:nth-child(7){
  content: url("https://static1.squarespace.com/static/5e4d565f9a543a4fb8ddc540/t/5f16ed8b795a690f8322dacb/1595338123572/email.png") !important;
}

Can anyone help with this?

As the Social Icons need to be grey on when displaying product items, or blog items, I've tried adding the below code in the Page Header Code Injection in the relevant blog and product databases.

Although, the end result is when I got to a product page item, or blog page item , the custom social icons are still white. Upon refreshing the page they change to grey.

Any idea why this is happening and how to make it so the custom social icons are grey without needing a manual refresh?

Thanks

Code added in Page Header Code Injection in the relevant blog and product databases

<style>
.SocialLinks-inner a:nth-child(5){filter: brightness(50%);}
.SocialLinks-inner a:nth-child(6){filter: brightness(50%);}
.SocialLinks-inner a:nth-child(7){filter: brightness(50%);}
</style>

Also with the above solution, the grey of the standard social icons is not the exact same grey as the additional custom social icons.

I think the better solution would be to somehow add CSS to tell it for change the custom icons to a specific grey is there is no overlay underneath.

Any ideas?