Simple Way to Add Floating Social Media Icons on Squarespace Website

Social media plays a pivotal role in shaping and promoting your business or personal identity. The addition of dynamic social icons, persistently visible on your website, presents a seamless avenue for enticing visitors to engage with your various platforms, ensuring they remain abreast of your latest content. Beyond facilitating easy connectivity, these icons lend a polished and unified aesthetic to your site. 

The recent update to Squarespace's Fluid Engine renders the previously employed codes on 7.1 obsolete, necessitating adjustments for continued efficacy.

Step 1: Add a Social Link Block To Footer Section

Integrate a social links block into the footer of your website. Afterwards, access the design tab within the block and align the icons to the left. Opt for either the knockout or solid style to elevate the visual presentation. 

By implementing this feature, not only do you enrich your site's connectivity, but you also imbue it with a touch of customization, ensuring a harmonious blend of digital interaction and aesthetic appeal.

Step 2:Inject the CSS Code 

Code:

#page {z-index:0;}
footer {
  overflow: unset;
  z-index: 10;
}
footer .sqs-svg-icon--wrapper {
  display: block !important;
}
footer .socialaccountlinks-v2-block {
  pointer-events: none; /*this ensures the icons don't overlap elements within the section*/
  position: fixed !important;
  top: 50% !important; /* Change this number to adjust the distance of the icons from the top */
  left: 10px!important;
  z-index: 2000000;

}
footer .socialaccountlinks-v2-block .sqs-svg-icon--list {
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
footer .socialaccountlinks-v2-block a {
  margin: 0 0 25px !important; /*Change this number to adjust the spacing of the social icons*/
  display: inline-block;
  pointer-events: auto;
}