CHANGING THE COLOR OF SOCIAL MEDIA ICONS IN SQUARESPACE

So you've created your brand-spankin' new SquareSpace website and styled it perfectly to match your brand with font pairings, gorgeous colors and a lovely layout. BUT, you can't get those pesky social media icons to match your pretty palette. Don't worry! I've gotcher back.

There's a tiny string of code that you can use to change the SquareSpace social media icons from black and blah to any color you want! Follow the steps below on your own site and voila, styled social icons!

Here are the details:

  1. In the backend of your SquareSpace site, navigate to DESIGN.

  2. Click on CUSTOM CSS.

  3. Paste in this bit of code:

.sqs-use--icon {     fill: #F65959 !important; } .sqs-svg-icon--wrapper:hover {   .sqs-use--icon {     fill: #444 !important; } }

The bolded HEX color is what you'll need to change to match your own color palette. If your not sure what HEX your color is, check out this handy converter.

That's it! You're set.

Don't you feel like a Squarespace genius?!

Note: This set of code works for the "Regular" style of icons. 


The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!


Previous
Previous

LOGO PROCESS: JULIA KILKENNY

Next
Next

HOW TO USE & ABUSE GRIDS FOR WEB DESIGN