Jump to content

Burchard

Circle Member
  • Posts

    35
  • Joined

  • Last visited

Community Answers

  1. Burchard's post in How can I place social icons in the footer instead of the header was marked as the answer   
    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; }  
  2. Burchard's post in How can I place social icons in the footer instead of the header was marked as the answer   
    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 🙂
×
×
  • 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.