These are the 2 questions I’ve seen thousands of times across Squarespace communities.
- How to add Tiktok icon
- … Whatsapp icon
For the first question, you can either use the Tiktok image, or use the code provided by @Ryan on the SS forum.
However, in this guide, I will talk about using FontAwesome, to have these two icons.
How to add Tiktok & Whatsapp icon
First, access Fontawesome.com & create a free (or pro) account. I use free account.
Next, access this link to create FontAwesome Kits Icons.
The FA will give you a script link. Copy it.
and insert into Code Injection Header
Next, We will see how to insert both icons into Social Block.
Add a Social Links Block > Enter 2 Link Icons > Enter Tiktok & Whatsapp URLs
Next, add this code into Code Injection Header
<style>
/* hide current link icons */
a.sqs-svg-icon--wrapper.url[href*="tiktok"], a.sqs-svg-icon--wrapper.url[href*="whatsapp"] {
visibility: hidden;
}
/* tiktok whatsapp icons size */
a.sqs-svg-icon--wrapper.url[href*="tiktok"], a.sqs-svg-icon--wrapper.url[href*="whatsapp"] {
width: 30px !important;
height: 30px !important;
}
/* add tiktok */
a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
content: "\e07b";
visibility: visible;
font-family: "Font Awesome 5 Brands";
}
/* add whatsapp */
a.sqs-svg-icon--wrapper.url[href*="whatsapp"]:before {
content: "\f232";
visibility: visible;
font-family: "Font Awesome 5 Brands";
}
</style>
You will have
