Adding TikTok Icon For Social Links

andreabalogun_ · November 13, 2020

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?

Beyondspace · November 13, 2020

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

tuanphan · November 14, 2020

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

andreabalogun_ · November 16, 2020

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

Beyondspace · November 16, 2020

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

andreabalogun_ · November 16, 2020

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.

Beyondspace · November 16, 2020

23 minutes ago, andreabalogun_ said:

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

lol please provide the site url

andreabalogun_ · November 16, 2020

5 hours ago, bangank36 said:

lol please provide the site url

sorry. thought I did that already lol.

https://www.steviemackey.com

Beyondspace · November 17, 2020

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

andreabalogun_ · November 18, 2020

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?

Beyondspace · November 18, 2020

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

andreabalogun_ · November 18, 2020

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!!

Kayceeastro62 · March 27, 2021

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?

tuanphan · March 28, 2021

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

epete22 · April 1, 2021

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

tuanphan · April 5, 2021

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

epete22 · April 8, 2021

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

Edited April 8, 2021 by epete22

epete22 · April 8, 2021

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.

tuanphan · April 9, 2021

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

RicardoRMS · April 30, 2021

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.

tuanphan · May 1, 2021

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

RicardoRMS · May 2, 2021

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;
}

Beyondspace · May 2, 2021

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?

RicardoRMS · May 2, 2021

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.

Beyondspace · May 2, 2021

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

Adding TikTok Icon For Social Links

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

andreabalogun_

Beyondspace

Beyondspace

Posted Images

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources