Jump to content

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

Go to solution Solved by Burchard,

Recommended 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 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 comment
  • Solution

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

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
  • 4 months later...
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
  • 2 weeks later...
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
  • 9 months later...
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
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

Create an account or sign in to comment

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

×
×
  • 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.