How to Style Social Media Icons on Squarespace Using CSS

As a website owner, you want to make sure that your website looks great and functions well for your visitors. One way to do this is by customizing the social icons in your header. Unfortunately, Squarespace doesn't offer much flexibility when it comes to designing social icons in the header. But don't worry, there is a way to tweak the look of your social icons with some CSS code.

To begin, log in to your Squarespace account and navigate to Design > Custom CSS. From here, you can insert the following CSS code:

// This changes header menu social media icons

.header--menu-open .icon, .header-actions-action--social .icon {
background: #FA0605;
padding:6px;
border-radius: 50%;
margin-right: 0px !important;

}

This CSS code gives you more freedom to style your social icons. With this code, you can add a background behind the icons. If you want to change the background color, simply swap out the HEX color in the code (the hex code is a color for code that starts with a hashtag).

Additionally, if you reduce the border-radius to 10-20%, you will get a square background shape with rounded corners. To have the circle-shaped background, set the border-radius to 50%. Padding makes the circle around the icon bigger or smaller, while not changing the size of the icon itself. It is recommended to keep it at 6px, but if you need to, you may tweak it. You may also add the margin if you’d like to space out the icons.

By using this CSS code, you can customize your social icons in the header to better match the overall look and feel of your website. With just a few tweaks, you can make your social icons stand out and enhance the user experience for your visitors.

Like always, if you have any questions, feel free to reach out!