LaurenWalters Posted February 11, 2021 Share Posted February 11, 2021 On 2/9/2021 at 7:37 PM, tuanphan said: Can you share site url? Above code I haven't tested on SS 7.0 @tuanphan Sure—it's https://www.gayleforman.com/ Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/12/2021 at 12:03 AM, LaurenWalters said: @tuanphan Sure—it's https://www.gayleforman.com/ Add to Design > Custom CSS /* footer tiktok */ footer.Footer [href*="tiktok.com"] { position: relative; top: 7px; } LaurenWalters 1 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
anthony Posted February 19, 2021 Share Posted February 19, 2021 (edited) Hey @tuanphan, I used your CSS example to get the TikTok logo in the footer and in most Social Blocks on my client's website. Thanks so much for that. Could you please help me with the social blocks in the header? Two things specifically: The script you wrote works on most pages. But I'm having trouble with the sizing of the icon. (example here) How can I modify the script to account for pages without a background image? (example here) Website: audreycarlan.com. Best, Anthony Edited February 19, 2021 by anthony Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 On 2/19/2021 at 7:57 PM, anthony said: Hey @tuanphan, I used your CSS example to get the TikTok logo in the footer and in most Social Blocks on my client's website. Thanks so much for that. Could you please help me with the social blocks in the header? Two things specifically: The script you wrote works on most pages. But I'm having trouble with the sizing of the icon. (example here) How can I modify the script to account for pages without a background image? (example here) Website: audreycarlan.com. Best, Anthony Hi, Recently I used FontAwesome Icons. It will be better. Step 1. Add this code to Code Injection Header (If you use Personal Plan > Edit Footer > Add a Code Block > Paste the code) <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> Step 2. Let me know. I will check & give the code to replace link with FA Tiktok icon https://fontawesome.com/icons/tiktok?style=brands 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
anthony Posted February 26, 2021 Share Posted February 26, 2021 On 2/22/2021 at 2:10 AM, tuanphan said: Hi, Recently I used FontAwesome Icons. It will be better. Step 1. Add this code to Code Injection Header (If you use Personal Plan > Edit Footer > Add a Code Block > Paste the code) <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> Step 2. Let me know. I will check & give the code to replace link with FA Tiktok icon https://fontawesome.com/icons/tiktok?style=brands Thank you! I completed step 1. And this is me doing step 2. Let me know if you need anything else. Link to comment
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 On 2/26/2021 at 9:42 PM, anthony said: Thank you! I completed step 1. And this is me doing step 2. Let me know if you need anything else. Hi. Sorry. I sent missing icon link. It is pro version link. Use this new link <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> 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
Logey Posted March 11, 2021 Share Posted March 11, 2021 Hi @tuanphan! I've sent you an email in the site link you provided regarding help for the TikTok icon. Please let me know if you've received it well 🙂 Link to comment
ToursWithMike Posted March 11, 2021 Share Posted March 11, 2021 (edited) On 3/2/2021 at 12:25 AM, tuanphan said: Hi. Sorry. I sent missing icon link. It is pro version link. Use this new link <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> Thank you, @tuanphan, for helping everyone get their TikTok icons. I followed the guide and now have the icon in the footer, but it is lower than the rest. Is it also possible to also get the circle version of the icon? My site is www.tourswithmike.com. I appreciate your assistance! Edited March 11, 2021 by ToursWithMike Link to comment
tuanphan Posted March 21, 2021 Share Posted March 21, 2021 On 3/12/2021 at 3:55 AM, ToursWithMike said: Thank you, @tuanphan, for helping everyone get their TikTok icons. I followed the guide and now have the icon in the footer, but it is lower than the rest. Is it also possible to also get the circle version of the icon? My site is www.tourswithmike.com. I appreciate your assistance! Change to 48px & add this code a.sqs-svg-icon--wrapper.url[href*="tiktok"], a.sqs-svg-icon--wrapper.url[href*="whatsapp"] { width: 48px !important; height: 48px !important; overflow: visible; } a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before { content: "\e07b"; visibility: visible; font-family: "Font Awesome 5 Brands"; height: 40px; line-height: 40px; display: block; border: 2px solid white; position: relative; top: -15px; border-radius: 50%; } 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
C10ROU Posted April 14, 2021 Share Posted April 14, 2021 On 4/25/2020 at 2:14 PM, tuanphan said: You can add this code to Home > Design > Custom CSS. Replace image in code with tik tok image url a.icon.icon--fill[aria-label="URL"] svg { display: none; } a.icon.icon--fill[aria-label="URL"] { background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png); background-size: cover; background-repeat: no-repeat; } Hi, Do you have a link that has a white version of the tiktok logo, instead of the black version? Link to comment
tuanphan Posted April 14, 2021 Share Posted April 14, 2021 2 hours ago, C10ROU said: Hi, Do you have a link that has a white version of the tiktok logo, instead of the black version? You can add color white a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before { content: "\e07b"; visibility: visible; font-family: "Font Awesome 5 Brands"; height: 40px; line-height: 40px; display: block; border: 2px solid white; position: relative; top: -15px; border-radius: 50%; color: 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
C10ROU Posted April 19, 2021 Share Posted April 19, 2021 On 4/14/2021 at 4:10 PM, tuanphan said: You can add color white a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before { content: "\e07b"; visibility: visible; font-family: "Font Awesome 5 Brands"; height: 40px; line-height: 40px; display: block; border: 2px solid white; position: relative; top: -15px; border-radius: 50%; color: white; } Thanks for this, but it does not seem to work for me. This is for the header. Footer is fine. I am not the most techy, just designing a site for my client, so it's probably me doing something wrong. Is there anything else i can provide you to help you with the issue? The site it not live yet so not sure what I can provide you with so you can see what I am talking about. Link to comment
tuanphan Posted April 21, 2021 Share Posted April 21, 2021 On 4/19/2021 at 6:30 PM, C10ROU said: Thanks for this, but it does not seem to work for me. This is for the header. Footer is fine. I am not the most techy, just designing a site for my client, so it's probably me doing something wrong. Is there anything else i can provide you to help you with the issue? The site it not live yet so not sure what I can provide you with so you can see what I am talking about. If your site is private/trial, 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
C10ROU Posted April 28, 2021 Share Posted April 28, 2021 On 4/21/2021 at 10:27 AM, tuanphan said: If your site is private/trial, you can setup password & share url. We can check easier Thanks. If you can take a look then that would be greatly appreciated. Url: https://bobcat-capybera-d9c9.squarespace.com/ Password: Lexgibb@n2021 Link to comment
tuanphan Posted April 29, 2021 Share Posted April 29, 2021 On 4/28/2021 at 4:24 PM, C10ROU said: Thanks. If you can take a look then that would be greatly appreciated. Url: https://bobcat-capybera-d9c9.squarespace.com/ Password: Lexgibb@n2021 Add to Design > Custom CSS /* Tiktok white color header */ header#header [href*="tiktok"] { filter: invert(1); -webkit-filter: invert(1); } 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
tuanphan Posted April 29, 2021 Share Posted April 29, 2021 On 4/28/2021 at 4:24 PM, C10ROU said: Thanks. If you can take a look then that would be greatly appreciated. Url: https://bobcat-capybera-d9c9.squarespace.com/ Password: Lexgibb@n2021 Also, do you want to fix these? (You can post new question & tag me, I will check & give the code) Site URL – https://bobcat-capybera-d9c9.squarespace.com/ 1. (Mobile-Home) Change to 2 columns/row? 2. (Tablet/Mobile-Overlay Menu) Change tiktok white color? 3. (Tablet-Blog) Change to 2 or 3 posts/row? 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
ktrusnik Posted June 19, 2021 Share Posted June 19, 2021 Can anyone help support adding the TikTok icon in social links in the header and footer for this site? https://maryalycevonstein.com/ Link to comment
tuanphan Posted June 21, 2021 Share Posted June 21, 2021 On 6/19/2021 at 10:00 PM, ktrusnik said: Can anyone help support adding the TikTok icon in social links in the header and footer for this site? https://maryalycevonstein.com/ Add tiktok next to Email icon?? >> You can add a link icon, then we will give the code to turn link to tiktok With Footer, add a Code Block under Contact Text >> paste this code <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> <ul class="t-social"> <li> <a href="mailto:mavs@maryalycevonstein.com"> <i class="far fa-envelope"></i> </a> </li> <li> <a href="https://www.instagram.com/maryalycevonstein/"> <i class="fab fa-instagram"></i> </a> </li> <li> <a href="https://tiktok.com"> <i class="fab fa-tiktok"></i> </a> </li> </ul> <style> /* code block padding top bottom */ .code-block { padding-top: 0; padding-bottom: 0; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: center; padding-left: 0; } .t-social li { display: inline-block; margin: 0; line-height: 100%!important; } .t-social li i { font-size: 30px; margin: 0 20px; } </style> 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
bettinagruen Posted July 12, 2021 Share Posted July 12, 2021 Hi , I added tuanphans code from the first page: a.icon.icon--fill[aria-label="URL"] svg { display: none; } a.icon.icon--fill[aria-label="URL"] { background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png); background-size: cover; background-repeat: no-repeat; } But now all the other social media icons disappeared. Seems they are still there, but white or invisible - i can't see them, but the link is still clickable. Furthermore, I can't change the colour of the Tiktok logo to #1370AF. Could you help please? https://www.klimawahl2021.net/ THX Bettina Link to comment
tuanphan Posted July 14, 2021 Share Posted July 14, 2021 On 7/12/2021 at 5:09 PM, bettinagruen said: Hi , I added tuanphans code from the first page: a.icon.icon--fill[aria-label="URL"] svg { display: none; } a.icon.icon--fill[aria-label="URL"] { background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png); background-size: cover; background-repeat: no-repeat; } But now all the other social media icons disappeared. Seems they are still there, but white or invisible - i can't see them, but the link is still clickable. Furthermore, I can't change the colour of the Tiktok logo to #1370AF. Could you help please? https://www.klimawahl2021.net/ THX Bettina Hi. It looks like you changed code & solve this? 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
bceecb Posted December 16, 2021 Share Posted December 16, 2021 @tuanphan, can you please help me too? I'm trying to add the TikTok logo next to Instagram in the header, but I'm not having luck with any of the code. I haven't tried the footer yet since I can't get the header to work, but I'd eventually like it there as well. For some reason, the TikTok URL is automatically generating a podcast icon instead of a link icon, which is what most people's seems to be defaulting to. I'm not sure if that's what's causing the coding issue. Site: https://cube-dog-azzj.squarespace.com/ (early stages) PW: jBwKzV6#Y? Link to comment
creedon Posted December 17, 2021 Share Posted December 17, 2021 49 minutes ago, bceecb said: For some reason, the TikTok URL is automatically generating a podcast icon instead of a link icon, which is what most people's seems to be defaulting to. It appears that SS understands that your link is related to a podcast and so is putting the podcast icon on. I don't have an answer for your other issues at this time. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bceecb Posted December 17, 2021 Share Posted December 17, 2021 21 hours ago, creedon said: It appears that SS understands that your link is related to a podcast and so is putting the podcast icon on. I don't have an answer for your other issues at this time. Yeah. I'm assuming that's because it's a TikTok account for a podcast and "podcast" is in the name of the account. Hopefully someone can help me figure out a way around this! Link to comment
bceecb Posted December 18, 2021 Share Posted December 18, 2021 22 hours ago, bceecb said: Yeah. I'm assuming that's because it's a TikTok account for a podcast and "podcast" is in the name of the account. Hopefully someone can help me figure out a way around this! I got it to work! I removed the TikTok account for the podcast and replaced it with the link to another TikTok account. The link icon appeared when I put that other account in, instead of the podcast icon, and it was still there even after I changed the link back to the original link for the podcast's TikTok account. From there, I was able to successfully enter the code to replace the link icon with the TikTok icon! tuanphan and creedon 2 Link to comment
af76131 Posted December 31, 2021 Share Posted December 31, 2021 (edited) On 7/13/2021 at 9:54 PM, tuanphan said: Hi. It looks like you changed code & solve this? @tuanphan Hi! I'd like to add TikTok and CashApp logos to my social links in my head and footer. Can you help me? I'm semi familiar with css and coding and would love to know how to do this so I can tweak the code on my own in the future if need be. Also wondering if there is a way to stack the icons instead of having them inline? Edited December 31, 2021 by af76131 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