Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding TikTok Icon For Social Links


andreabalogun_

Question

Recommended Posts

  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
23 minutes ago, andreabalogun_ said:

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

 

lol please provide the site url

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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%)
}

image.png.ae87498f4954b5cfdb3af25bfbf187ef.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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%)
}

image.png.ae87498f4954b5cfdb3af25bfbf187ef.png

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

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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!!

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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. 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
Link to comment
  • 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?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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. 

Link to comment
  • 0
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()
}

image.png.964b3ee65209d272503f037ea1d7b28c.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...