Nav Social Icon coloue hover in Brine

Site URL: https://conch-armadillo-kf4s.squarespace.com/

Hi,

Current site URL: https://conch-armadillo-kf4s.squarespace.com/

I would like the social icons in the top nav header to turn orange on hover like i have done in the footer. 

I'm using Brine Template.

Thanks in advance.

try adding to Home > Design > custom CSS

header.Header.Header--bottom a:hover use {
    fill: red !important;
}

Thanks for your response. 

Almost working but it's turning the entire icon 'block' red instead of just the icon.

I've updated the link so you can see what's happening: https://conch-armadillo-kf4s.squarespace.com/

Any thoughts?

Thanks again.

1 hour ago, danoshea said:

Thanks for your response. 

Almost working but it's turning the entire icon 'block' red instead of just the icon.

I've updated the link so you can see what's happening: https://conch-armadillo-kf4s.squarespace.com/

Any thoughts?

Thanks again.

Remove above code & use this

header.Header.Header--bottom a:hover use.SocialLinks-link-icon {
    fill: red !important;
}

Great! it's worked.

Thanks tuanphan