A1Protocol Posted February 10, 2022 Share Posted February 10, 2022 Hey guys bumping this to make a suggestion to the team. Still no social link icon for Tiktok and it's 2022...^^ jenplusplus 1 Link to comment
Kate_B Posted February 24, 2022 Share Posted February 24, 2022 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
Beyondspace Posted February 24, 2022 Share Posted February 24, 2022 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 zab and Kate_B 2 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
Kate_B Posted February 24, 2022 Share Posted February 24, 2022 That's worked perfectly, thank you so much for your help @bangank36 🙂 Beyondspace 1 Link to comment
plunkettmedia Posted March 6, 2022 Share Posted March 6, 2022 Hi, I've tried all of the above codes. Can you help with my site please? https://www.plunkettmedia.com.au Link to comment
LizBowery Posted March 8, 2022 Share Posted March 8, 2022 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
tuanphan Posted March 10, 2022 Share Posted March 10, 2022 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
LizBowery Posted March 11, 2022 Share Posted March 11, 2022 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? Link to comment
tuanphan Posted March 13, 2022 Share Posted March 13, 2022 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
LizBowery Posted March 13, 2022 Share Posted March 13, 2022 That worked!! Thank you so much! Link to comment
KarenWiddowson Posted March 17, 2022 Share Posted March 17, 2022 On 11/14/2020 at 6:35 PM, tuanphan said: If you use Business Plan or higher, try this code by @RyanDejaegher 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/ Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 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
KarenWiddowson Posted March 23, 2022 Share Posted March 23, 2022 On 3/19/2022 at 6:23 PM, tuanphan said: To change footer icon to white, add this to Design > Custom CSS /* footer tiktok icon */ footer.sections [href*="tiktok"] svg { fill: white; } Worked perfectly! Thank you 🙂 Link to comment
meetmiranda Posted September 16, 2022 Share Posted September 16, 2022 On 11/13/2020 at 11:43 AM, bangank36 said: Let's add a link to your tiktok account I will provide custom css for turning it to tiktok icon I am looking for help with this too for header + footer and social links blocks. My website is meetmiranda.com - what do you recommend? Link to comment
Beyondspace Posted September 16, 2022 Share Posted September 16, 2022 (edited) 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 September 16, 2022 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
Beyondspace Posted September 16, 2022 Share Posted September 16, 2022 My testing 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
paul2009 Posted November 23, 2022 Share Posted November 23, 2022 (edited) 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 November 23, 2022 by paul2009 tuanphan 1 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
nahlah Posted December 19, 2022 Share Posted December 19, 2022 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
AWeier Posted February 25, 2023 Share Posted February 25, 2023 Any idea on why the Houzz logo that publishes live when you link your account is their old one, instead of the new one that previews in the Edit box. You can see the difference here: Link to comment
paul2009 Posted February 25, 2023 Share Posted February 25, 2023 (edited) Please contact Squarespace Customer Care to report this. Please post back with their reply. Edited June 8, 2023 by paul2009 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
hayleyd2022 Posted April 4, 2023 Share Posted April 4, 2023 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
hayleyd2022 Posted April 4, 2023 Share Posted April 4, 2023 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
tuanphan Posted April 7, 2023 Share Posted April 7, 2023 On 4/4/2023 at 6:53 PM, hayleyd2022 said: I tried using this and the icon was yellow - someone please help me 🙂 What is your site url? We can check easier 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment