Social Media Icons on footer - colors not changing

[aenahbanana]

Hi There!

I’ve been trying to change the social media icon hover color but all the codes from here don’t work.

Can you please help me figure out why it’s not changing?

Thank you!

[jade]

Hi there,

Please try this:

.x-social-global a:hover i {
    color: #fff !important;
}

Hope this helps.

[aenahbanana]

Thank you! This changed the icon but I wanted the background hover colour to change. Here’s the screenshot: https://snag.gy/5jsycn.jpg

I used this code but it didn’t work.

.x-social-global a:hover.facebook{
color: #ffeaf8 !important;
}

Do I have the wrong selector?

[thai]

Hi There,

Please update your custom CSS with this:

.x-social-global a.facebook:hover i {
    color: #ffeaf8 !important;
}

Hope it helps

[aenahbanana]

Hello!

Unfortunately, that didn’t work.

I’ve tried most of the code solutions in the forum but none of them work, is there something else I’m missing?

[mldarshana]

Hi There,

Copy all your CSS rules into an online tool like CSS Lint (http://csslint.net/) and check for errors. If you see any errors, you need to resolve them, so that it will parse your other CSS rules correctly.

Thanks!

[aenahbanana]

Hi there!

I fixed the errors but I realized that the code above is targeting the icon itself and not the background colour.

I tweaked the code to change the hover background colour of the icons.

.x-social-global a:hover.facebook{
background-color: #ffeaf8 !important;
}

Thank you!

[jade]

Glad to hear you got it sorted.

Cheers!