Change colour of Social Icons on hover

Hi,

I just want to change the colour of my social icons to red when I hover on it. this is my website : www.wholeheartcreative.com.au my template is Motto

Thanks!

@shelleyjavier Add to Home > Design > Custom CSS

.social-icons-color-black.social-icons-style-knockout .sqs-use--mask:hover {
   fill: #ff0000 !important;
}

Reference: https://beaverhero.com/motto-template-squarespace/#ChangeFooterSocialIconon_Hover

@tuanphan that’s awesome. Thank you!!

On 8/9/2019 at 6:57 AM, tuanphan said:

@shelleyjavier Add to Home > Design > Custom CSS

.social-icons-color-black.social-icons-style-knockout .sqs-use--mask:hover {
   fill: #ff0000 !important;
}

 

 

Reference: https://beaverhero.com/motto-template-squarespace/#ChangeFooterSocialIconon_Hover

@tuanphan Hi! Is there a similar solution that you have determined for doing this in Squarespace 7.1?

Here is the subject site: https://themontgomerycode.com/

4 minutes ago, benja231 said:

@tuanphan Hi! Is there a similar solution that you have determined for doing this in Squarespace 7.1?

If you share link to your site, I can take a look

1 minute ago, tuanphan said:

If you share link to your site, I can take a look

https://themontgomerycode.com/

Thanks so much! Lunch on me, @tuanphan

14 minutes ago, benja231 said:

https://themontgomerycode.com/

Thanks so much! Lunch on me, @tuanphan

I like your site

You mean icons on header, or footer or?

@tuanphan Thanks so much! I will keep you in mind when we need expert help.

I would like to target the header social icons.

1 minute ago, benja231 said:

@tuanphan Thanks so much! I will keep you in mind when we need expert help.

I would like to target the header social icons.

Add to Home > design > custom CSS

.header-actions-action.header-actions-action--social a:hover svg {
    fill: red !important;
}

@tuanphan Thanks so much! I really appreciate the help. You rock!