Change social media header icon colors on specific pages in Squarespace

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?