Social Links Blur Issue

Site URL: https://rafida.org

Hey,

On our BRINE website, we added 4 additional custom social icons to the social links.

The colour of the social links is set to white
I added the below code in order to change the colour of the social links to grey on certain pages (e.g. product item pages)

After adding this code, the social icons did change to grey, but for some reasons 2 of the social icons are blurry.
The 2 that are blurry are 2 of the custom social icons that were added manually.
For some reason one of the other custom social icons did not turn blurry?

Any ideas how I can resolve this?
Kind regards

Site access:
https://rafida.org
pass: lastphasetesting3


Code added to change social icons to grey:
 

<style>
  .SocialLinks-inner a:nth-child(5){
    colour: #000000;}
  .SocialLinks-inner a:nth-child(6){
    colour: #000000;}
  .SocialLinks-inner a:nth-child(7){
    colour: #000000;}
</style>

<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>

Does anyone have any idea how to fix this?

Hi

Use this code in Design -> Custom CSS

.tweak-social-icons-style-regular .SocialLinks-link {
    image-rendering: -webkit-optimize-contrast !important;
}

Please use the like button if it helps you!

Best,
Leopold

@IXStudio Unfortunately this didn't solve it 😞

Any other ideas?

1 minute ago, Rafida said:

@IXStudio Unfortunately this didn't solve it 😞

Any other ideas?

Use the SVG icons or Font Awesome!
If you want to use this way please contact me via DM for paid time work!

Best,
Leopold

@IXStudio

I actually am using icons from Font Awesome and Icons 8!

Could the issue be that I should use higher pixel SVGS?
The strange thing is the icons are fine on regular pages, but only become blurred on the pages where I turn them grey using the above code I provided...

I even testing the code I used to turn them grey on one of the standard icons that come with Squarespace (twitter).

And it also turned blurry.

SVG file is vector based it's not pixel!
You can change the color in the SVG tag if you are using the SVG HTML tag!

Well I have change the colour to white by editing the SVG using VECTR.COM

The issue is that I actually need them white, but also need them grey to only certain pages.
That's why I added the code in the original post to change them to grey on specific pages.
But when I do that they turn blurry 🤕
 

Check this code please.

.tweak-social-icons-style-regular .Header--overlay .SocialLinks-link-icon {
    fill: gray !important;
}

Where would I place this code?

Putting it in the site wide Custom CSS makes only the standard social icons grey and on all pages.
It doesn't change the added custom social icons grey, and I would need it on just certain pages.
 

Which page do you want to make it gray?

Pages we want icons to be grey:

- Product collection

- All Blogs

- Cart page

So you need to use the body ID of the pages with your CSS rule. Just it!

Could you help me do that please? Wouldn't know how to...

Also the code you provided only changes the standards social icons to grey (youtube, facebook, twitter), and not the additional custom social icons we've added (discord, patreon, whatsapp, email)

Also, it's important to mention, the blur issue only happens on Safari. On Google chrome there is no blur issue whatsoever...

9 hours ago, Rafida said:

Could you help me do that please? Wouldn't know how to...

Also the code you provided only changes the standards social icons to grey (youtube, facebook, twitter), and not the additional custom social icons we've added (discord, patreon, whatsapp, email)

Please contact me via DM.