In this article, you’ll learn how to change social media header icon colors on specific pages in Squarespace - no fluff, just what you need to know. If you find the article useful, feel free to share it with the world using the social sharing icons on this page. Thank you!

1. Why use this code?

Many reasons! Sometimes, you may be using a background image or video that makes the social icon colors blend into the background too much. That is, if you’re using a transparent header of course.

🚨 You’ll need to download the Squarespace Block Identifier chrome extension to target the correct section in the code below.

📩 Join the inner circle to get exclusive code updates

2. The code

Paste where? Design > Custom CSS

🚨🚨 Replace #CollectionID with the page’s ID that you want to target.

🚨🚨🚨 Replace #ffffff with any color of your choosing.

// Change color of social media icons on single page //

#CollectionID {

.header-actions .icon--fill svg {

fill: #ffffff !important

}

}

3. Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?