Adding TikTok Icon For Social Links

On 11/13/2020 at 11:35 PM, tuanphan said:

If you use Business Plan or higher, try this code by @RyanDejaegher

Hi! I used this code and it works! However, the icon size is smaller compared to my client's other social link icons. Do you know how to have all icons in the same size? Thank you. 

Client's site: https://amysuto.squarespace.com/about

On 10/26/2021 at 1:16 AM, paigethirtytwo said:

Hi! I used this code and it works! However, the icon size is smaller compared to my client's other social link icons. Do you know how to have all icons in the same size? Thank you. 

Client's site: https://amysuto.squarespace.com/about

You can also consider using FontAwesome to add Tiktok icon. Thus you can adjust size, color easily

If you want this, I will check & give new code

On 10/27/2021 at 6:26 AM, tuanphan said:

You can also consider using FontAwesome to add Tiktok icon. Thus you can adjust size, color easily

If you want this, I will check & give new code

Thanks, Tuan! I think you were able to fix this; I made you admin to that website 🙂

On 10/30/2021 at 12:20 AM, paigethirtytwo said:

Thanks, Tuan! I think you were able to fix this; I made you admin to that website 🙂

It looks like you solved

I need that too, if possible. My url is www.drrichfg.com

32 minutes ago, DrRichFG said:

I need that too, if possible. My url is www.drrichfg.com

Hey @DrRichFG try to use this free plugin for adding custom TikTok icon https://squarerefresh.com/plugins/social-plus

On 11/16/2021 at 3:27 PM, DrRichFG said:

I need that too, if possible. My url is www.drrichfg.com

Add to Settings > Advanced > Code Injection > Footer

<script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]')

tiktoks.forEach(item => {
    item.innerHTML = `
<svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 50 50">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"/>
</svg>`
})
</script>

How do I add a white Tiktok logo to my header and footer? I tried following the code above, but couldn't get it to work.

My website is: euniceks.com

1 hour ago, eunicekim said:

How do I add a white Tiktok logo to my header and footer? I tried following the code above, but couldn't get it to work.

My website is: euniceks.com

It seems that you posted your issue in a new thread

I've given solution for it, kindly check if it works properly on your site

On 11/20/2021 at 7:42 AM, eunicekim said:

How do I add a white Tiktok logo to my header and footer? I tried following the code above, but couldn't get it to work.

My website is: euniceks.com

Add to Code Injection > Footer

<script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]')

tiktoks.forEach(item => {
    item.innerHTML = `
<svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 50 50">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"/>
</svg>`
})
</script>

Hi!
Can someone help me with this? I have added the link to my TikTok profile but I would like to use a TikTok logo in place of the generic SquareSpace "link" icon. My URL is https://www.letterbetteracademy.com/

I see all of the code above but I am not really sure what to do with it. I would also like to do the same for our VK account.

Thanks for any help.

34 minutes ago, LetterBetterAcademy said:

Hi!
Can someone help me with this? I have added the link to my TikTok profile but I would like to use a TikTok logo in place of the generic SquareSpace "link" icon. My URL is https://www.letterbetteracademy.com/

I see all of the code above but I am not really sure what to do with it. I would also like to do the same for our VK account.

Thanks for any help.

Try adding to Home > Design > Custom Css

/*Setting for tiktok icon*/
.icon--fill[href*='tiktok'] {
	background: url('https://api.iconify.design/teenyicons/tiktok-solid.svg') no-repeat center center / contain;
	svg {
		display: none;
	}
}

/*Setting for vk icon*/
.icon--fill[href*='vk.com'] {
	background: url('https://api.iconify.design/teenyicons/tiktok-solid.svg') no-repeat center center / contain;
	svg {
		display: none;
	}
}

Replace my url with your real image url

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

I used the code below for the tiktok icon but when I add the social link block on the contact page (pw: grit), the tik tok icon sits on the upper left of the box.  Anybody know how I can fix it? 

/* Footer Tiktok icon */
.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: transparent;
}
.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: 20%;
  left: 20%;
  transform: translate(-50%, -50%)
}

/* Header Tiktok icon */
a.icon.icon--fill[href*=tiktok] svg {
  opacity: 0;
}
a.icon.icon--fill[href*=tiktok] {
  position: relative;
}
a.icon.icon--fill[href*=tiktok]:after {
      content: '';
    position: absolute;
    background: url(https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/tiktok.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert()
}

.highlight { color: #32c247} .lowlight { color: #FFFFF }

[data-section-id="618ceedae1861a7310dc6883"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
 

38 minutes ago, Nir said:

I used the code below for the tiktok icon but when I add the social link block on the contact page (pw: grit), the tik tok icon sits on the upper left of the box.  Anybody know how I can fix it? 

/* Footer Tiktok icon */
.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: transparent;
}
.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: 20%;
  left: 20%;
  transform: translate(-50%, -50%)
}

/* Header Tiktok icon */
a.icon.icon--fill[href*=tiktok] svg {
  opacity: 0;
}
a.icon.icon--fill[href*=tiktok] {
  position: relative;
}
a.icon.icon--fill[href*=tiktok]:after {
      content: '';
    position: absolute;
    background: url(https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/tiktok.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert()
}

.highlight { color: #32c247} .lowlight { color: #FFFFF }

[data-section-id="618ceedae1861a7310dc6883"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
 

What is your protected password?

22 minutes ago, bangank36 said:

What is your protected password?

It's in my post, the password is grit

19 minutes ago, Nir said:

It's in my post, the password is grit

Try changing your previous code with value 50% for top and left

10 minutes ago, bangank36 said:

Try changing your previous code with value 50% for top and left

 

That worked for the social icons block but then it messed up the icon in the footer. 

33 minutes ago, Nir said:

That worked for the social icons block but then it messed up the icon in the footer. 

Apply the following code for your footer icon

footer .sqs-svg-icon--wrapper[href*=tiktok]>div {
  transform: translate(-50%,-50%)  scale(2)!important;
}

Hey there! I had used the codes I found here, and they mostly worked for my site. In the header and footer they looked fine, but if I put my social icons as an element the Tik Tok logo is half broken. My site is TayRevs.com and the password is: raytevs

It's not ready for publication yet so I have a password on it. Is there any way someone could help me?  :)

6 hours ago, tayrevs said:

Hey there! I had used the codes I found here, and they mostly worked for my site. In the header and footer they looked fine, but if I put my social icons as an element the Tik Tok logo is half broken. My site is TayRevs.com and the password is: raytevs

It's not ready for publication yet so I have a password on it. Is there any way someone could help me?  🙂

Hi @tayrevs

Can you share your site with the protected password to check your issue?

On 11/16/2020 at 6:11 PM, bangank36 said:

.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%)
}

Hi there! Thank you for sharing this! Could you help me out with the code for the patreon logo as well?

42 minutes ago, Phil84vaive said:

Hi there! Thank you for sharing this! Could you help me out with the code for the patreon logo as well?

Hi @Phil84vaive,

What do you intend to implement for logo?

Can you share your site with protected password so we can take a look?

On 12/8/2021 at 9:09 PM, bangank36 said:

Hi @tayrevs

Can you share your site with the protected password to check your issue?

it is: raytevs 

Thank you!

I'm wondering where you guys get the Tiktok logo from?  I'm assuming I want a vector image so I can style it the way the other logos are?  I am making some changes to my girlfriend's website for the first time in several years.

https://www.kalimeister.com

On 12/24/2021 at 4:16 AM, billybradshaw said:

I'm wondering where you guys get the Tiktok logo from?  I'm assuming I want a vector image so I can style it the way the other logos are?  I am making some changes to my girlfriend's website for the first time in several years.

https://www.kalimeister.com

Add to Design > Custom CSS. Replace pixabay image url with tiktok image url

header#header [href*="tiktok"] div svg {
    display: none;
}
header#header [href*="tiktok"] div {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/10/13/59/star-6860582__480.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}