How to change the color of social media icons in your Squarespace menu
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
The social media icons in the header of your website are stuck as the the same color as your navigation links, but that doesn’t work for all Squarespace designs! In this tutorial, you’ll learn how to change the color of those icons with code, and how to create hover effects for them too. the codes are below, but there are three parts to each icon - make sure you watch the video to so you’ll know what part of the code you need to use, and what part you’ll need to change to make it uniquely yours!
If this is your first time using CSS for Squarespace awesome! I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn
Video tutorial
Code Example
You’ll find the code from this tutorial below. Make sure you change the colors for your own unique style.
This code changes the icon color:
.header .icon svg {fill: yellow!important}
This coded changes the background color; only needed for solid or outline design formats:
.header .icon--fill {background: lightblue!important}
This code changes the outline color and is only needed for the outline design format:
.header-icon-border-style-outline {color: green!important}
This code changes the color of the icon and background on a hover:
.header .icon:hover svg {fill: pink!important}
.header .icon--fill:hover {background: #e5f5f6important}
