Social Icons: Tiktok, Whatsapp

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