Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I place social icons in the footer instead of the header


Burchard
Go to solution Solved by Burchard,

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

4 answers to this question

Recommended Posts

  • 0

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 🙂

Link to post
  • 0

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 post
  • 0

You can also use FontAwesome icons, the icon code will be shorter, something like this

<i class="fa fa-instagram" aria-hidden="true"></i>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...