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
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; } }