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

    Hey! I’m Vigasan and I love the Internet. I have a Bachelor of Science in Computing Systems with a double specialization in Computer Science and Software Engineering. I’ve been creating websites and working with social media since 2014 and have created over 200 Squarespace websites so far.

    https://www.adlyticmarketing.com/
    Previous
    Previous

    Prevent Banner Images From Being Cropped in Squarespace

    Next
    Next

    Stop Multiple Lines in Dropdown Menu on Squarespace 7.1