Jump to content

Can I add a custom icon image for the social link icon on the footer?

Recommended Posts

I've made the header social link icon invisible, but I've made it visible on the footer social link. I wanted to add Whats App as a social link, but the icon shows up as a link icon, not as an Instagram icon as a social link. Is there any way I can customize the icon as a What's App icon, where it currently looks like a link? 

Here is how my footer looks now when I added a what's app social link. I want to make the link icon as customized What's app icon. 

image.thumb.png.0d3d48dc846f4e67f5f5b50c60364fe0.png

Link to comment
  • Replies 4
  • Views 656
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Can you share your website URL and the whatsapp link URL?

You would need code like this and an icon image for Whatsapp:

.social-icons-color-standard .url[href="***URL***"] svg {
  visibility:hidden;
}
.social-icons-color-standard .url {
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
.social-icons-color-standard .url[href="***URL***"] {
  background-image: url('***UPLOADED IMAGE URL***');
  background-size: cover;
  background-repeat: no-repeat;
  transform:scale(1);
}

But the exact code depends on the social block settings, and adding the links and image URL.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)
1 hour ago, Ziggy said:

Can you share your website URL and the whatsapp link URL?

You would need code like this and an icon image for Whatsapp:

.social-icons-color-standard .url[href="***URL***"] svg {
  visibility:hidden;
}
.social-icons-color-standard .url {
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
.social-icons-color-standard .url[href="***URL***"] {
  background-image: url('***UPLOADED IMAGE URL***');
  background-size: cover;
  background-repeat: no-repeat;
  transform:scale(1);
}

But the exact code depends on the social block settings, and adding the links and image URL.

Thank you for your reply! @Ziggy

The website URL is https://www.vinaliehk.com/
and Whatsapp link is https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0
So should I apply this code to the code injection page?

Edited by Chloe9656
Link to comment

@Ziggy I pasted this code to CSS but it still shows as same.

Website:https://www.vinaliehk.com/

Whatsapp link:https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0

 

.social-icons-color-standard .url[href="https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0"] svg {
  visibility:hidden;
}
.social-icons-color-standard .url {
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
.social-icons-color-standard .url[href="https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0"] {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOhu6mGbCCIiIeZD_wMWVc0BFqh5Lp0QlNVvMcQ1KLJQ&s');
  background-size: cover;
  background-repeat: no-repeat;
  transform:scale(1);
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.