How to Change Color of Social Media Icons in Squarespace | AJM Learn

While you can edit the color of any social link block in the design tab, social links in the header inherit the color set for the rest of your navigation links which isn’t always ideal. So, let’s fix it.

Original post:
https://ajmexperience.com/learn-posts/change-social-icon-color

For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn

Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-cheat-sheet

Get our full CSS Library:
https://www.ajmexperience.com/squarespace-css-library

——————

HERE’S HOW TO CHANGE COLOR OF SOCIAL MEDIA ICONS:
Simply change the hex code to your desired color.

// Change the social icon color in the header //
.header-actions .icon--fill svg {fill: #7cccbd !important}

// Change the color on hover //
.header-actions .icon--fill:hover svg {fill: #7cccbd !important}

// Change the color of the social icons in the header on mobile //
.header--menu-open .header-menu .icon svg {fill: #7cccbd !important}

——————

AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm

Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.

Видео How to Change Color of Social Media Icons in Squarespace | AJM Learn канала AJM Experience