Floating Social Media Icons on Squarespace

Here’s how you can have social media icons for people to click on, that are always visible on the screen.

Table of Contents

• Step 1 - Add the Social Media Icons
• Step 2 - The CSS Code
• Step 3 - Change Icon Colors

Step 1 - Add the Social Media Icons

So the first thing we’re going to do is add the social media icons.

Edit your FOOTER and add a Social Links block and style it how you want. Just make sure the Alignment is set to the Left.

** I recommend using a Style of Circle-Knockout. **

Step 2 - The CSS Code

Copy and paste the following CSS into DESIGN → CUSTOM CSS.

footer{
  .sqs-svg-icon--wrapper{
    display: block !important;
    margin: 5px 0px !important;
  }
  
  .socialaccountlinks-v2-block{
    position: fixed !important;
    top: 50% !important; /* Adjust this percentage to move the icons up or down */
    left: 10px !important;
    z-index: 99 !important;
  }
}

Step 3 - Change Icon Colors

By default Squarespace only gives you a few color options (dark, light, or standard), here’s how to make the colors match your branding. Copy and paste the following CSS into DESIGN → CUSTOM CSS and then change the colors as needed.

footer{
  /* This is for the background color */
  .social-account-links-v2-block .social-icons-style-knockout .sqs-use--mask{
    fill: #000000 !important;
  }

  /* This is for the icon color */
  .socialaccountlinks-v2-block .sqs-svg-icon--social{
    fill: #ffffff !important;
  }
}