Burchard Posted February 12, 2021 Share Posted February 12, 2021 Site URL: https://www.maartenrots.nl/ Hi there, I'm using Brine (Moksha) and would like to have the social icons in the footer instead of the header. It would be great to get some help with this, thanks! Link to comment
Burchard Posted February 13, 2021 Author Share Posted February 13, 2021 Fixed it after some fiddling around. I added the social links to the header in the Site Styles. Then I copied the piece of code Squarespace uses to add the icons in the header. I pasted this in a code block in the footer and used CSS to position it. I then turned the social links off again in the Site Styles. That's it, works like a charm 🙂 creedon 1 Link to comment
tuanphan Posted February 15, 2021 Share Posted February 15, 2021 Can you share the detail here, for other users? Thank you! 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
Solution Burchard Posted February 18, 2021 Author Solution Share Posted February 18, 2021 Sure, here it is a bit more in-depth; This is the bit of code to add the social icons. I added e-mail and Instagram, to figure out the specific codes for other platforms I would suggest to briefly turn on the icons in the design styles and then copy that code; <div class="social-footer"> <a href="http://instagram.com/your-username" target="_blank" class="SocialLinks-link instagram-unauth" style=""> <div> <svg class="SocialLinks-link-svg" viewBox="0 0 64 64"> <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#instagram-unauth-icon"></use> <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#instagram-unauth-mask"></use> </svg> </div> </a><a href="mailto:name@yourwebsite.com" target="_blank" class="SocialLinks-link email" style=""> <div> <svg class="SocialLinks-link-svg" viewBox="0 0 64 64"> <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#email-icon"></use> <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#email-mask"></use> </svg> </div> </div> This is the CSS I used to position the icons: /* Footer social icons */ .social-footer { display: flex; justify-content: center; } Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 You can also use FontAwesome icons, the icon code will be shorter, something like this <i class="fa fa-instagram" aria-hidden="true"></i> 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
PathfinderJake Posted July 1, 2021 Share Posted July 1, 2021 How could I do this on my site so that the icons also appear on the footer and on the mobile app footer? hickoryhillsfamilydental.com pathfinders123 Link to comment
tuanphan Posted July 2, 2021 Share Posted July 2, 2021 On 7/1/2021 at 8:35 AM, PathfinderJake said: How could I do this on my site so that the icons also appear on the footer and on the mobile app footer? hickoryhillsfamilydental.com pathfinders123 You mean make Instagram under Contact Us on mobile? 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
PathfinderJake Posted July 16, 2021 Share Posted July 16, 2021 On 7/2/2021 at 4:07 AM, tuanphan said: You mean make Instagram under Contact Us on mobile? Yes Link to comment
tuanphan Posted July 18, 2021 Share Posted July 18, 2021 On 7/1/2021 at 8:35 AM, PathfinderJake said: How could I do this on my site so that the icons also appear on the footer and on the mobile app footer? hickoryhillsfamilydental.com pathfinders123 Incorrect password. Can you check it again? 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
smotheredbutta Posted April 26, 2022 Share Posted April 26, 2022 On 2/18/2021 at 10:13 PM, tuanphan said: You can also use FontAwesome icons, the icon code will be shorter, something like this <i class="fa fa-instagram" aria-hidden="true"></i> Hi! Can you explain this? What code would I use to add an icon from FontAwesome to the footer? I want to use the boxed linkedin icon (fa fa-linkedin rather than fa-fa linked-in). website: www.pillarsresearch.org Link to comment
tuanphan Posted April 29, 2022 Share Posted April 29, 2022 On 4/26/2022 at 6:35 PM, smotheredbutta said: On 2/19/2021 at 10:13 AM, tuanphan said: You can also use FontAwesome icons, the icon code will be shorter, something like this <i class="fa fa-instagram" aria-hidden="true"></i> Hi! Can you explain this? What code would I use to add an icon from FontAwesome to the footer? I want to use the boxed linkedin icon (fa fa-linkedin rather than fa-fa linked-in). website: www.pillarsresearch.org First, add a Code Block on Footer > Paste this code <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Next, to add Linkedin Icon, add a Code Block > Paste this code <a href="https://linkedin.com/abcyxz"><i class="fa fa-linkedin" aria-hidden="true"></i></a> 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
nmbenson1 Posted March 21 Share Posted March 21 Hi @tuanphan do you know how to hide footer icons by chance? I'm trying to remove those links in the Brine template and add a line between the footer nav and top blocks. Any thoughts would be greatly appreciated! Thanks. mwlit.com PW: press spacebar Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/22/2023 at 12:34 AM, nmbenson1 said: Hi @tuanphan do you know how to hide footer icons by chance? I'm trying to remove those links in the Brine template and add a line between the footer nav and top blocks. Any thoughts would be greatly appreciated! Thanks. mwlit.com PW: press spacebar It looks like you figured it out? 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
nmbenson1 Posted March 29 Share Posted March 29 Hi @tuanphan I did, aside from including a line. Thanks for responding. I actually just pinged you on another topic though. I am trying to have images in summary blocks with click through URLs open in a new window. Have you worked on that in Brine by chance? Link to comment
tuanphan Posted April 2 Share Posted April 2 On 3/29/2023 at 8:14 PM, nmbenson1 said: Hi @tuanphan I did, aside from including a line. Thanks for responding. I actually just pinged you on another topic though. I am trying to have images in summary blocks with click through URLs open in a new window. Have you worked on that in Brine by chance? I remember I answered. You try checking it again 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment