geeknproud Posted January 17, 2021 Share Posted January 17, 2021 (edited) Site URL: https://geeknproud.com Hi, I'm new here, just starting my site and I was looking to add the whatsapp link in my social links on the header and footer but it seems it is not possible as it shows a chain icon instead of whatsapp. Any way for me to add the icon? I had found these two images for the icons which matches the theme of my site. One of the images might not be visible as it is a white outline and the forum background makes it disappear but it is there below the black icon. Can someone help me edit the CSS to include this? I'm using a personal plan and the site is https://geeknproud.com password is 202101 Edited January 17, 2021 by geeknproud explanation Link to comment
tuanphan Posted January 18, 2021 Share Posted January 18, 2021 Just solved same case a few days ago. Do you use Business or Commerce Plan? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
geeknproud Posted January 18, 2021 Author Share Posted January 18, 2021 Quote 4 hours ago, tuanphan said: Just solved same case a few days ago. Do you use Business or Commerce Plan? Neither, I'm using a personal plan Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 Hi. Your site is private. can you setup password & share url? We can check code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
geeknproud Posted January 20, 2021 Author Share Posted January 20, 2021 Quote 12 hours ago, tuanphan said: Hi. Your site is private. can you setup password & share url? We can check code easier I have change it to public right now as it is pretty much ready. All I'm missing is the whatsapp icon in my social link. I currently show the link icon. Link to comment
geeknproud Posted January 25, 2021 Author Share Posted January 25, 2021 I still need help with this @tuanphan Is there something you can suggest, please? Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 (edited) On 1/25/2021 at 7:38 AM, geeknproud said: I still need help with this @tuanphan Is there something you can suggest, please? Hi. Sorry for the delay. Just had some days off. Step 1. Edit Footer > Add a Code Block > paste this code <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Step 2. Let me know. I will check code to replace link icon to whatsapp https://fontawesome.com/v4.7.0/icon/whatsapp Edited February 2, 2021 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
geeknproud Posted February 2, 2021 Author Share Posted February 2, 2021 7 hours ago, tuanphan said: Hi. Sorry for the delay. Just had some days off. Step 1. Edit Footer > Add a Code Block > paste this code <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Step 2. Let me know. I will check code to replace link icon to whatsapp https://fontawesome.com/v4.7.0/icon/whatsapp Hi @tuanphan thanks for replying. I've added the code block with the code you mentioned. Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 Step 2. Add this to Design > Custom CSS header#header [href*="wa.me"] { visibility: hidden; } header#header [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
geeknproud Posted February 6, 2021 Author Share Posted February 6, 2021 On 2/4/2021 at 7:11 AM, tuanphan said: Step 2. Add this to Design > Custom CSS header#header [href*="wa.me"] { visibility: hidden; } header#header [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; } That was awesome, sorry to bother you once more, I swear this is the last thing. I tried doing it myself but couldn't figure how to do the same but for the link icon on the footer so that it will show the whatsapp icon there as well. Link to comment
geeknproud Posted February 7, 2021 Author Share Posted February 7, 2021 I managed to figure it out, well kinda, still need some help. After try some stuff with the code I found what I needed to target and came up with this: footer#footer-sections [href*="wa.me"] { visibility: hidden; } footer#footer-sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; } However when doing this, for some weird reason the icon end up misaligned: tried a few other CSS options to try and bring it to alignment but I just couldn't. Not sure what I might be missing. Link to comment
Solution tuanphan Posted February 7, 2021 Solution Share Posted February 7, 2021 Usethiss code footer.sections [href*="wa.me"] { visibility: hidden; position: relative; } footer.sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } geeknproud 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
geeknproud Posted February 9, 2021 Author Share Posted February 9, 2021 On 2/7/2021 at 8:26 AM, tuanphan said: Usethiss code footer.sections [href*="wa.me"] { visibility: hidden; position: relative; } footer.sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } Thank you so much! That worked perfectly. You can close this post. That's all I needed. Link to comment
creedon Posted February 9, 2021 Share Posted February 9, 2021 2 hours ago, geeknproud said: You can close this post. That's all I needed. Please don't delete the post as others may find it of use. 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
Lianna Posted March 24, 2021 Share Posted March 24, 2021 On 2/2/2021 at 5:39 AM, tuanphan said: Hi. Sorry for the delay. Just had some days off. Step 1. Edit Footer > Add a Code Block > paste this code <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Step 2. Let me know. I will check code to replace link icon to whatsapp https://fontawesome.com/v4.7.0/icon/whatsapp Hi @geeknproud a - You pasted this code as a code block in the footer or in the settings > advanced > code injection(footer)? b - this step worked for the header? I'm lost on this. It's not working for me :-( Link to comment
tuanphan Posted March 25, 2021 Share Posted March 25, 2021 19 hours ago, Lianna said: Hi @geeknproud a - You pasted this code as a code block in the footer or in the settings > advanced > code injection(footer)? b - this step worked for the header? I'm lost on this. It's not working for me :-( Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
stefansegers Posted January 4, 2022 Share Posted January 4, 2022 Hi I am trying to use this too. My website www.trouwshoot.nl In the footer you will see the different social icons but Whatsapp is not working. I am using SP7.0 Added in the Code Injection Header - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Design Custom CSS - footer.sections [href*="wa.me"] { visibility: hidden; position: relative; } footer.sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } Link to comment
tuanphan Posted January 5, 2022 Share Posted January 5, 2022 12 hours ago, stefansegers said: Hi I am trying to use this too. My website www.trouwshoot.nl In the footer you will see the different social icons but Whatsapp is not working. I am using SP7.0 Added in the Code Injection Header - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Design Custom CSS - footer.sections [href*="wa.me"] { visibility: hidden; position: relative; } footer.sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } With 7.0, try this code footer.Footer [href*="wa.me"] { visibility: hidden; position: relative } footer.Footer [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mjmyers Posted December 6, 2022 Share Posted December 6, 2022 On 1/4/2022 at 8:42 PM, tuanphan said: With 7.0, try this code footer.Footer [href*="wa.me"] { visibility: hidden; position: relative } footer.Footer [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) } hi, this code does not work for me. I still see a link icon and not the whatsapp icon. I am using 7.1 Thanks! Link to comment
tuanphan Posted December 10, 2022 Share Posted December 10, 2022 On 12/6/2022 at 9:55 AM, mjmyers said: hi, this code does not work for me. I still see a link icon and not the whatsapp icon. I am using 7.1 Thanks! With 7.1, try this code [href*="wa.me"] { visibility: hidden; position: relative } [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) } If the code doesn't work, you need to share link to your site, we can easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
christyprice Posted December 27, 2022 Share Posted December 27, 2022 If you have the budget, I use and recommend a plugin for this now - I find it easier for both me and my clients: https://christyprice.com/blog/different-social-links-icons-squarespace christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
Des_media Posted November 24 Share Posted November 24 Can we increase the size of the WhatsApp icon in the header or footer? Link to comment
Des_media Posted November 24 Share Posted November 24 got the answer use this code and adjust the size as needed Quote [href*="wa.me"] { visibility: hidden; position: relative; } [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; /* Adjust the size as needed */ } tuanphan 1 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