How to change the social icons colour in Squarespace 7.1

In this tutorial you will be able to change the colour of the social media in Squarespace. From your Squarespace account, go to the Custom CSS Editor. paste the code below into the Custom CSS editor box.

Complexity: Easy

Header Icons

.header-actions .icon--fill svg {fill: #DD2424 !important} 
(changes the colour of the social media icon)

Header Icon hover effects

.header-actions .icon--fill svg:hover {
fill:#6EE1EB!important; 
transform:scale(1.7); } 
(changes the colour as well as scales the the social media icon)

Mobile menu icons

.header--menu-open .header-menu .icon svg {
  fill: #DD2424 !important} 
(changes the colour of the social media icon)

Icons on pages

.sqs-use--icon {fill: #DD2424!important;} 
(changes the icon colour)

.sqs-use--mask {fill: #EDB1B1!important;}
(changes the icon background colour)

.sqs-svg-icon--wrapper {border-color: #5E5A5A!important} 
(changes the border colour)

Icons on pages hover effects

.sqs-use--icon:hover {fill: #000000!important;} 
(changes the icon colour on hover)

.sqs-use--mask {fill: #D41ECE!important;}
(changes the icon background colour on hover)

.sqs-svg-icon--wrapper {border-color: #E5E3E5!important} 
(changes the border colour on hover)

Feel free to change the colours to your preferred liking.

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.