Adding TikTok Icon For Social Links

I can't thank you enough 🥰 😍 ❤️ it looks wonderful! 

On 4/9/2021 at 12:22 AM, tuanphan said:

You can setup password & share url. We can check easier

https://www.madijaks.com/

pw:dallasfortworth

On 11/18/2020 at 3:23 AM, bangank36 said:

/* 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: #777;
}
.sqs-svg-icon--wrapper[href*=tiktok] {
  background: #ffffff;
}
.sqs-svg-icon--wrapper[href*=tiktok]:hover {
  background: #ffffff !important;;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: inline-block;
  background: url(https://www.designbust.com/download/1019/png/tiktok_logo_png_transparent256.png) no-repeat;
  background-size: cover;
  width: 50%;
   height: 50% ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

/* Header */
.SocialLinks-link[href*=tiktok] .SocialLinks-link-svg {
  display: none;
}
.sqs-svg-icon--list:hover .SocialLinks-link[href*=tiktok] {
  background: #777;
}
.SocialLinks-link[href*=tiktok] {
  background: #ffffff;
}
.SocialLinks-link[href*=tiktok]:hover {
  background: #ffffff !important;;
}
.SocialLinks-link[href*=tiktok] > div {
  display: inline-block;
  background: url(https://www.designbust.com/download/1019/png/tiktok_logo_png_transparent256.png) no-repeat;
  background-size: cover;
  width: 50%;
   height: 50% ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Find your colored tiktok icon and replace accordingly

Hello Bangank36, Sir, please may you help as I have same query? I wish to have TikTok icon on Squarespace Header and I have copied the above code into Design>Custom CSS yet no luck? Please help buddy? Thanks you, Trushar. The website is: www.lovevivacity.com

4 minutes ago, Trushar said:

Hello Ba Ngan L. (Bangank36),

Sir please may you help as I have same query? I wish to have TikTok icon on Squarespace Header and I have copied the above code into Design>Custom CSS yet no luck? Please help buddy?Cheers Ba.

 

Thank you,

Trushar.

The website is: www.lovevivacity.com

4 hours ago, Trushar said:

 

try 

@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: 25%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #5c9c20;
}

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

9 hours ago, bangank36 said:

try 

@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: 25%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #5c9c20;
}

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

 

Thanks champion Ba Ngn L. It worked! Amazing support, wishing you all the best in your ventures. For larger projects I shall definitely be using your agency services. Please feel free to stay in touch: trushar@lovevivacity.com

Can someone help me add the tiktok social icon to the header of my squarespace website? It's been months on this forum with zero help.

38 minutes ago, epete22 said:

Can someone help me add the tiktok social icon to the header of my squarespace website? It's been months on this forum with zero help.

what is your site url

On 5/13/2021 at 6:09 PM, bangank36 said:

try 

@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: 25%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #5c9c20;
}

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

 

We have tried to insert this code, but it is not working. We go to Page Settings, click Advanced, and insert the code, but it does not work. 

Can you help?

8 hours ago, equityinsightsllc said:

We have tried to insert this code, but it is not working. We go to Page Settings, click Advanced, and insert the code, but it does not work. 

Can you help?

Hi. Add to Design > Custom CSS

On 6/15/2021 at 2:31 AM, tuanphan said:

Hi. Add to Design > Custom CSS

Thank you! It worked, but it's green. How can we change the color to black?

14 hours ago, equityinsightsllc said:

Thank you! It worked, but it's green. How can we change the color to black?

Hi. Can you share site url? We can check easier

The CSS and code injection in this thread doesn't work. Whats the correct code for 7.1?

https://sturgeon-round-l39b.squarespace.com/
pw: dallas

Hi Bangank36, could you please help as well? The code is not quite right for my website. I would like the tiktok logo to be white. www.unknownmortalorchestra.com

19 hours ago, arimf11 said:

Hi Bangank36, could you please help as well? The code is not quite right for my website. I would like the tiktok logo to be white. www.unknownmortalorchestra.com

try

@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: 120%;
    height: 120%;
    top: 0;
    left: 0;
    position: absolute;
    color: #ffffff;
    font-size: 20px;
}

On 6/25/2021 at 8:55 AM, epete22 said:

The CSS and code injection in this thread doesn't work. Whats the correct code for 7.1?

https://sturgeon-round-l39b.squarespace.com/
pw: dallas

try

@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: 25%;
    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: #ffffff;
}
.header-actions-action--social [href*=tiktok]:hover {
  background: #ffffff !important;;
}
.header-actions-action--social [href*=tiktok]:after {
  content: "\e900";
  display: inline-block;
  font-family: 'icomoon';
  width: 80%;
   height: 80% ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  position: absolute;
  color: #000;
  font-size: 15px;
}

@bangank36 clearly I am doing something wrong. I still get the link icon. 

Font face goes into the CSS correct?

Footer goes into code injection correct?

Header goes into code injection correct?

25 minutes ago, epete22 said:

@bangank36 clearly I am doing something wrong. I still get the link icon. 

Font face goes into the CSS correct?

Footer goes into code injection correct?

Header goes into code injection correct?

All of the snippet is css so it should be in custom css at once

Can you do one for us please! www.averagesocialite.com 

www.tiktok.com/@averagesocialite

On 7/4/2021 at 3:03 AM, AverageSocialite said:

Can you do one for us please! www.averagesocialite.com 

www.tiktok.com/@averagesocialite

Hi. I see tiktok here. It looks like you fixed it?

I am trying to add the tiktok logo to my footer as well. I used the code provided above but am not sure how to match the colors to the other social icons. 

URL:  www.hicuties.com
Are you able to help?

@tuanphan

On 9/3/2021 at 2:18 AM, taylaavee said:

I am trying to add the tiktok logo to my footer as well. I used the code provided above but am not sure how to match the colors to the other social icons. 

URL:  www.hicuties.com
Are you able to help?

@tuanphan

Hi,

Your Tiktok is image. Change its color before uploading.

On 9/4/2021 at 7:17 PM, tuanphan said:

Hi,

Your Tiktok is image. Change its color before uploading.

THANK YOU!!!!

I just came across this problem and I found the solution here:

https://www.squarestylist.com/blog/custom-social-icon

Nice blog and useful info!