Jump to content

Custom Social Links Colour Issue

Recommended Posts

Site URL: https://rafida.org


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



Screenshot 2020-09-18 at 03.40.44.png

Screenshot 2020-09-18 at 03.40.50.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

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?


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

.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%);}


Link to comment

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?

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.