Adding TikTok Icon For Social Links

Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?

38 minutes ago, andreabalogun_ said:

Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?

 

 

Let's add a link to your tiktok account I will provide custom css for turning it to tiktok icon

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

On 11/13/2020 at 10:43 AM, bangank36 said:

Let's add a link to your tiktok account I will provide custom css for turning it to tiktok icon

It's for a client - https://www.tiktok.com/@steviemackey

20 minutes ago, andreabalogun_ said:

It's for a client - https://www.tiktok.com/@steviemackey

 

have you add a link to footer social icon? add it there and i will show how to add css for it

12 hours ago, bangank36 said:

have you add a link to footer social icon? add it there and i will show how to add css for it

It's there now. I hid it because of the link icon. Thanks.

23 minutes ago, andreabalogun_ said:

It's there now. I hid it because of the link icon. Thanks.

 

lol please provide the site url

5 hours ago, bangank36 said:

lol please provide the site url

sorry. thought I did that already lol.

https://www.steviemackey.com

3 hours ago, andreabalogun_ said:

sorry. thought I did that already lol.

https://www.steviemackey.com

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

On 11/16/2020 at 7: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%)
}

Thanks! This worked well for the footer. Any advice on how to do this for my header too?

35 minutes ago, andreabalogun_ said:

Thanks! This worked well for the footer. Any advice on how to do this for my header too?

/* 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

48 minutes ago, 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

Thanks sooooo much!!

Thank you all for this! For some reason the tik tok logo stacks on top of the default one that SquareSpace provides. Any ideas on how to rid of the old one? 

13 hours ago, Kayceeastro62 said:

Thank you all for this! For some reason the tik tok logo stacks on top of the default one that SquareSpace provides. Any ideas on how to rid of the old one? 

Can you share site url? We can check this easier

I am trying to follow this but have a little trouble. 

Does the header code get placed into the custom CSS section then you add the tiktok URL to the social links when you edit the header?

Erik

On 4/2/2021 at 4:00 AM, epete22 said:

I am trying to follow this but have a little trouble. 

Does the header code get placed into the custom CSS section then you add the tiktok URL to the social links when you edit the header?

Erik

Yes. Add to Custom CSS

@Tuan, I added it but it doesn't do anything

Can someone help me add the tiktok logo to the header as a social link?

I tried adding the header code to the custom CSS and the code injection in the header. FYI. The site is not published yet.

9 hours ago, epete22 said:

Can someone help me add the tiktok logo to the header as a social link?

I tried adding the header code to the custom CSS and the code injection in the header. FYI. The site is not published yet.

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

Hello I'm asking for the same help - I'd like a white TikTok logo to match the other social links on my website. I have the personal plan. I'd like to inject it into my header I don't have a footer. This is my website: https://ricardomusic.studio 

Side question while I'm here I keep getting these messages when I test my website speed: 

Remove unused CSS

Remove unused javascript

Eliminate render-blocking resources

I've changed my font to just two light fonts. And got my website to a decent speed - I'm just wondering if there is anyway to fix those three things or something like removing the cart link anchor on my website since I do not use a cart function on my website. 

Thank you for your time, 

Eternally grateful. 

Ricardo. 

9 hours ago, RicardoRMS said:

Hello I'm asking for the same help - I'd like a white TikTok logo to match the other social links on my website. I have the personal plan. I'd like to inject it into my header I don't have a footer. This is my website: https://ricardomusic.studio 

Side question while I'm here I keep getting these messages when I test my website speed: 

Remove unused CSS

Remove unused javascript

Eliminate render-blocking resources

I've changed my font to just two light fonts. And got my website to a decent speed - I'm just wondering if there is anyway to fix those three things or something like removing the cart link anchor on my website since I do not use a cart function on my website. 

Thank you for your time, 

Eternally grateful. 

Ricardo. 

I see you use Squarespace 7.1. You can edit Site Footer >> Add the code

21 hours ago, tuanphan said:

I see you use Squarespace 7.1. You can edit Site Footer >> Add the code

Doesn't work. I've tried all the code posted here they don't work in either the footer or header. I tried this guide from another forum thread which told me to go to design and css and what occurred is that the icon appeared over the internet link rather than replace it. 

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: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

1 hour ago, RicardoRMS said:

Doesn't work. I've tried all the code posted here they don't work in either the footer or header. I tried this guide from another forum thread which told me to go to design and css and what occurred is that the icon appeared over the internet link rather than replace it. 

 

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: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

I dont see tiktok link on yoursite, is it on the header?

On 5/1/2021 at 1:10 AM, tuanphan said:

I see you use Squarespace 7.1. You can edit Site Footer >> Add the code

Doesn't work. I've tried all the code posted here they don't work in either the footer or header. I tried this guide from another forum thread which told me to go to design and css and what occurred is that the icon appeared over the internet link rather than replace it. 

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: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

I tried the different codes and took the link on and off to test it. I put it back on now. Yes its in my header. 

12 minutes ago, RicardoRMS said:

Doesn't work. I've tried all the code posted here they don't work in either the footer or header. I tried this guide from another forum thread which told me to go to design and css and what occurred is that the icon appeared over the internet link rather than replace it. 

 

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: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

I tried the different codes and took the link on and off to test it. I put it back on now. Yes its in my header. 

this code works

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()
}