Social media icon colour change

[pgf21]

Hi

I’m trying to change the colour of the social icons to the official social media hex codes. I’ve managed to do this but when you rollover them the white icon has now disappeared as it’s in the same colour as the rollover boxes. Is there a way to have a white icon on rollover or remove the box?

I’ve attached 2 screenshots.

Thanks

Adam

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

change:

i.fa-twitter {
    color: #1dadea;
}

.fa-facebook-f:before, .fa-facebook:before {
    color: #3B5998;
}

i.fa-pinterest {
    color: #C92228;
}

i.fa-instagram {
    color: #517fa4;
}

to

ul.social-icons li a:not(:hover) i.fa-twitter {
    color: #1dadea;
}

ul.social-icons li a:not(:hover) .fa-facebook-f:before, ul.social-icons li a:not(:hover) .fa-facebook:before {
    color: #3B5998;
}

ul.social-icons li a:not(:hover) i.fa-pinterest {
    color: #C92228;
}

ul.social-icons li a:not(:hover) i.fa-instagram {
    color: #517fa4;
}

– Kyle

[elizabethanneflynn]

Hi Guys, Double checking on this- can I just add this code to custom css field in theme options?

[elizabethanneflynn]

I’m getting ccs errors when I try it.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

They’re not errors, just hints, ignore them

– Kyle

[pgf21]

Thanks a lot!

Adam

[pgf21]

Btw I’ve tried to change to resolved but it doesn’t seem to work.

[elizabethanneflynn]

Kyle would you mind throwing up the css for color change just on hover?

[Kyle – SUPPORT]

@elizabethanneflynn what is it you’re trying to do?

[elizabethanneflynn]

Hi Kyle I’m trying to change the social icon colors on hover.

[elizabethanneflynn]

Sorry I’m a noob and I have to deliver this site today.

[Kyle – SUPPORT]

Here:

ul.social-icons li a:hover i.fa-twitter {
    color: #1dadea;
}
 
ul.social-icons li a:hover .fa-facebook {
    color: #3B5998;
}
 
ul.social-icons li a:hover i.fa-pinterest {
    color: #C92228;
}
 
ul.social-icons li a:hover i.fa-instagram {
    color: #517fa4;
}

– Kyle

[elizabethanneflynn]

Thank you that’s so awesome! I have a few other topics I’m having issues with, would it be better to create a private ticket?

[Kyle – SUPPORT]

No problem

Yes please create a new topic

– Kyle

[elizabethanneflynn]

Hi Kyle this didn’t work for me I am getting an invalid security credential?

Attachments:

You must be logged in to view attached files.