Jump to content

How can I change the color of my social icons?

Recommended Posts

Hello there, I have been trying unsuccessfully to change my Facebook icon to brown, instead of black. My site is leslie-stitzlein.squarespace.com

Looking at the code, I've identified an id=“socialLinks" and a class="social-links”

I have tried the two options below:

#socialLinks {
 color: #8b5555;

.social-links {
 color: #8b5555;

Link to comment
  • Replies 10
  • Views 20.4k
  • Created
  • Last Reply
  • 4 months later...

@Karin There's 2 places you can inject it. One is under code injection under settings, but you'll have to put the css between style tags The second place you can inject it is the custom css window. If you are still on squarespace 6, you can find it when you preview your site. Just click on the paint brush icon and its at the very bottom of the left panel. On squarespace 7 its under design.

I'm a web and mobile developer.

Link to comment
  • 1 month later...
  • 2 weeks later...

This is what I've just figured out, but you have to put it into the code injection footer section, between style tags, for it to last more than 1 second.

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {fill: #42afc2;}.social-icons-style-knockout.social-icons-color-black:hover .sqs-svg-icon--wrapper:hover .sqs-use--mask {fill:#42afc2}

This changes the hover color as well, though I haven't been able to figure out the gray hover color in between.

my site: https://helen-skiba.squarespace.com/

Link to comment
  • 2 weeks later...
  • 1 year later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.