Change color social media icons

Hi,

Let us know which social icon’s hover color you want to change.

Thanks.

Hi,

I would like to change the hover color for the following social icons:
– Facebook
– Twitter
– Google+
– Instagram

Thanks!

Hi,

Please go to Admin Dashboard >>Appearance >>Theme Options >>General Settings and find custom CSS editor.

Now copy below CSS in Custom CSS editor

.social li.facebook:hover{
color:COLOR_CODE !important;
}
.social li.twitter:hover{
color:COLOR_CODE !important;
}
.social li.google-plus:hover{
color:COLOR_CODE !important;
}
.social li.instagram:hover{
color:COLOR_CODE !important;
}

Save the changes.

Please replace COLOR-CODE with your COLOR’s Code.

Thanks.

Hi,

It didn’t work.
I now used this one:

.social li.facebook {
    background-image: linear-gradient(to bottom, transparent 50%, #ffff00 50%);
}
.social li.twitter {
    background-image: linear-gradient(to bottom, transparent 50%, #ffff00 50%);
}
.social li.google-plus {
    background-image: linear-gradient(to bottom, transparent 50%, #ffff00 50%);
}
.social li.instagram {
    background-image: linear-gradient(to bottom, transparent 50%, #ffff00 50%);
}

This works fine for ‘Facebook’ and ‘Instagram’ but when I hoover over ‘Twitter’ and ‘Google+’, first the Original ‘orange’color is shown before it changes in yellow.
Your assistance is much appreciated!

Hi,

Please share your site URL.

Thanks.

Hi,

I am running my site locally.
I checked again and for all abofe mentioned social icons the color reamins the same behind the new one.

I have made a screen video – please let me know how i can share this with you?

Thanks!

Hi,

If you want to use same background image CSS for all social icons, you can use below CSS.

.social li:hover{
background-image: linear-gradient(to bottom, transparent 50%, #ffff00 50%) !important;
}

You can upload video to youtube and share URL here.

Thanks.

Hi,

Please see below link re. upload video:

As you can see the orignal background – darkblue for Facebook/Instagram and orange for Twitter/Google+ is still shown when you hoover these icons. I have added the blue hoover color.

Thanks!

Hi,

Did you already have time to have a look?

Thanks

Hi..

Sorry for inconvenience.

Please copy below css code into Custom CSS Editor.

.social li {
    background-image: linear-gradient(to bottom, transparent 50%, #ffff00 50%) !important;
}
.social li:hover {
background-color:#ffff00 !important;
}

Save the changes.

Thanks.

Hi,

Perfect!

Thanks

Most Welcome..

Thanks.

When you hover over the social media headers, can you remove the “title” that appears. For example when you hover over Facebook icon, the word “Facebook” pops up. Can that be removed?

• This reply was modified 7 years, 10 months ago by swilliamsgewalker.