How to add TikTok icon for social links in Squarespace 7.1

This tutorial will show you how to add TikTok icon for social links using custom CSS in your Squarespace website. Currently an icon option for TikTok is not avaliable, so we have to use a work around. This solution is credited to bangank36.

Complexity: Easy

---

Step 1

Once you have created your TikTok link, simply copy at the css code below and paste it within your custom css area.

---

Step 2

Copy the code below and paste within the custom CSS section.

@font-face {
    font-family: 'icomoon';
    src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Footer */
.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: none;
}
.sqs-svg-icon--wrapper[href*=tiktok]:after {
    content: "\e900";
    display: inline-block;
    font-family: 'icomoon';
    width: 100%;
    height: 100%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #000;
}

/* Header */
.header-actions-action--social [href*=tiktok] svg {
  display: none;
}
.header-actions-action--social [href*=tiktok] {
  background: transparent;
}
.header-actions-action--social [href*=tiktok]:hover {
  background: transparent !important;;
}
.header-actions-action--social [href*=tiktok]:after {
  content: "\e900";
  display: inline-block;
  font-family: 'icomoon';
  width: 80%;
  height: 80% ;
  top: 50%;
  left: 50%;
  color: #000;
  transform: translate(-50%, -50%) !important;
  position: absolute;}

---

STEP 3

For the Footer options, you can just the following values within the /* Footer * / css codes, to suit your site.

top: 60%;
left: 50%;
width: 80%;
height: 80%;
color: #000;

The same also applies for the /* Header */options

top:60%;
left:50%;
width: 80%;
height: 80%;
color: #000;

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.