Jump to content

Adding TikTok Icon For Social Links

Recommended Posts

  • 2 weeks later...

Hi there, thanks for all the help on this @tuanphan @bangank36!

I've added the following code to my site which has worked great:

 

* Tiktok icon - 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%)
}


/* Tiktok icon - Header */
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()
}


Just wondering if there is a way to change the color of the Tiktok icon on hover? 

Here's my site url: 
https://alyssa-matesic.squarespace.com/
Password: yourstorystronger

You'll see in the header nav, all social icons change to this color on hover: #BD8047
so I wanted to see if I could apply that the the Tiktok icon as well.


Any tips would be so appreciated.
Thanks so much!

Link to comment
2 hours ago, Kate_B said:

Hi there, thanks for all the help on this @tuanphan @bangank36!

I've added the following code to my site which has worked great:

 

* Tiktok icon - 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%)
}


/* Tiktok icon - Header */
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()
}


Just wondering if there is a way to change the color of the Tiktok icon on hover? 

Here's my site url: 
https://alyssa-matesic.squarespace.com/
Password: yourstorystronger

You'll see in the header nav, all social icons change to this color on hover: #BD8047
so I wanted to see if I could apply that the the Tiktok icon as well.


Any tips would be so appreciated.
Thanks so much!

You can try the following to change background when hovering the tiktok icon

a.icon.icon--fill[href*=tiktok]:hover:after {
  background-image: url('https://api.iconify.design/cib/tiktok.svg?color=red');
  filter: unset;
}

Change the url until it meets your requirement

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

Hi all! First, thank you so much to everyone who's posted custom CSS for this issue so far - that worked great to display the tiktok icon on my site (www.lizbowery.com) when it's viewed in desktop mode, so thanks very much!

The issue I'm having is that when the site is viewed on mobile, the icon goes back to showing up as a link. I don't suppose any of you incredibly helpful people would have some extra CSS code I could use that would fix the link in mobile too??

Thanks in advance!

Link to comment
On 3/6/2022 at 1:05 PM, plunkettmedia said:

Hi, I've tried all of the above codes. Can you help with my site please?

 

https://www.plunkettmedia.com.au

Do you still need help?

 

On 3/8/2022 at 11:55 AM, LizBowery said:

Hi all! First, thank you so much to everyone who's posted custom CSS for this issue so far - that worked great to display the tiktok icon on my site (www.lizbowery.com) when it's viewed in desktop mode, so thanks very much!

The issue I'm having is that when the site is viewed on mobile, the icon goes back to showing up as a link. I don't suppose any of you incredibly helpful people would have some extra CSS code I could use that would fix the link in mobile too??

Thanks in advance!

Change your code to this new code

header#header [href*=tiktok]:hover {
    background: transparent !important
}

header#header [href*=tiktok]:after {
    content: "\e900";
    display: inline-block;
    font-family: 'icomoon';
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    color: #000;
    transform: translate(-50%,-50%) !important;
    position: absolute
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/11/2022 at 9:39 AM, LizBowery said:

Hi @tuanphan! Unfortunately that code didn't quite work - what it's done is put tiktok icon over a visible link icon on my page. But the good news is that this hybrid tiktok/link icon shows up on desktop and mobile, so that's progress! Any other ideas?

Use this new code

header#header [href*=tiktok]:hover {
    background: transparent !important
}

header#header [href*=tiktok]:after {
    content: "\e900";
    display: inline-block;
    font-family: 'icomoon';
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    color: #000;
    transform: translate(-50%,-50%) !important;
    position: absolute
}
header#header [href*="tiktok"] svg {
    opacity: 0;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/17/2022 at 10:58 AM, KarenWiddowson said:

I'm currently using this code on my site, but it's showing up as one colour in my header and a different colour in my footer. Ideally I'd like them to both be same. Can someone please help? 

My website is https://alteredartspace.com/

To change footer icon to white, add this to Design > Custom CSS

/* footer tiktok icon */
footer.sections [href*="tiktok"] svg {
    fill: white;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
6 hours ago, meetmiranda said:

I am looking for help with this too for header + footer and social links blocks. My website is meetmiranda.com - what do you recommend?

You can try adding to Home > Design > Custom Css

a[href*="tiktok"] svg {
  display:none;
}

a[href*="tiktok"] >div:after {
  content:'';
  display: block;
  width: 50%;
  height: 50%;
  background-image: url('https://api.iconify.design/fa6-brands/tiktok.svg');
  background-repeat: no-repeat;
  background-position:center center;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

.sqs-svg-icon--list a[href*="tiktok"] >div:after {
  background-image: url('https://api.iconify.design/fa6-brands/tiktok.svg?color=white');  
}

 

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.8ff29e0280884c8c27decf023b6db9b9.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...

You should not require custom code to add a TikTok logo to built-in social icon areas (all version 7.1 sites, and some version 7.0 templates) or Social Links blocks. 

These logos automatically display when you add a URL from that platform in social links:

  • Apple Podcasts
  • Bandsintown
  • Behance
  • CodePen
  • Discord
  • Dribbble
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Goodreads
  • Google Play
  • Houzz
  • IMDb (when links end in .com)
  • Instagram
  • LinkedIn
  • Medium
  • Meetup
  • Pinterest
  • Reddit
  • SmugMug
  • Snapchat
  • SoundCloud
  • Spotify
  • Stitcher
  • The Dots
  • Tidal
  • TikTok
  • TripAdvisor
  • Tumblr
  • Twitch
  • Twitter
  • Vevo
  • Vimeo
  • VSCO
  • Yelp
  • YouTube

For more information, see Adding social icons.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 4 weeks later...
On 11/23/2022 at 11:57 AM, paul2009 said:

You should not require custom code to add a TikTok logo to built-in social icon areas (all version 7.1 sites, and some version 7.0 templates) or Social Links blocks. 

These logos automatically display when you add a URL from that platform in social links:

  • Apple Podcasts
  • Bandsintown
  • Behance
  • CodePen
  • Discord
  • Dribbble
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Goodreads
  • Google Play
  • Houzz
  • IMDb (when links end in .com)
  • Instagram
  • LinkedIn
  • Medium
  • Meetup
  • Pinterest
  • Reddit
  • SmugMug
  • Snapchat
  • SoundCloud
  • Spotify
  • Stitcher
  • The Dots
  • Tidal
  • TikTok
  • TripAdvisor
  • Tumblr
  • Twitch
  • Twitter
  • Vevo
  • Vimeo
  • VSCO
  • Yelp
  • YouTube

For more information, see Adding social icons.

Did this help? Please give feedback by clicking an icon below  ⬇️

the tiktok logo isn't loading on my account? I tried to connect my account as well in case but I wasn't able to do that

Link to comment
  • 2 months later...

Please contact Squarespace Customer Care to report this. Please post back with their reply.

image.png.153b429c8e6e6033f304169e74557367.png

 

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 month later...
On 12/25/2021 at 5:24 PM, tuanphan said:

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

Can someone please help me put a tiktok icon in my header - I 've tried every CSS on this thread and none of them work! 🙂

 

Link to comment
On 2/24/2022 at 9:54 PM, Kate_B said:

Hi there, thanks for all the help on this @tuanphan @bangank36!

I've added the following code to my site which has worked great:

 

* Tiktok icon - 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%)
}


/* Tiktok icon - Header */
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()
}


Just wondering if there is a way to change the color of the Tiktok icon on hover? 

Here's my site url: 
https://alyssa-matesic.squarespace.com/
Password: yourstorystronger

You'll see in the header nav, all social icons change to this color on hover: #BD8047
so I wanted to see if I could apply that the the Tiktok icon as well.


Any tips would be so appreciated.
Thanks so much!

I tried using this and the icon was yellow - someone please help me 🙂

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.