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