Social Icons in orginal colors


#1

Dear all,

how can I change the color of my social icons (facebook, twitter, google+, pinterest, youtube) to there original icon design or colors?

Anyone an idea?

greetz,
Stefanie


#2

Hi Stefanie,

The social icons is using general color settings. So if you want to change the color as original design, you have to change it manually.

Please to post the URL of your site and let me know which icon would you like to change.

Regards,
Awan


#3

Hi Awan,

that´s my site:

Thanks for helping with this

Missy :slight_smile:


#4

Okay, here is your css code:

.social-menu-widget a[href*="facebook.com"]::before {
    color: #415E9B;
}
.social-menu-widget a[href*="twitter.com"]::before {
    color: #1C9DEC;
}
.social-menu-widget a[href*="google.com/+"]::before {
    color: #D34539;
}
.social-menu-widget a[href*="pinterest.com"]::before {
    color: #BD2429;
}
.social-menu-widget a[href*="youtube.com"]::before {
    color: #E92908;
}

#5

Hi Awan,

you´re awesome :-).
Thanks for the css code I implemented at custom css.

It doesn´t look really good but I think it is better to use the original icon colors, because the user is used to that.

Greetings,
Stefanie


#6

Hi Stefanie,

Could you please to explain this: “I think it is better to use the original icon colors, because the user is used to that”

I noticed your question in the first post in above is about “how can I change the color of my social icons (facebook, twitter, google+, pinterest, youtube) to there original icon design or colors?”

In the css code in above, I am using color-picker to inspect the color of the icon that being used by the original social media.

Did I missed something?

Regards,
Awan


#7

Hi Awan,

you did all right and nothing is missing. What I just would say is that the original icon design with there colors are known from users, so I prefer the original design instead of the same color for all icons, what is default in the theme. It´s just my explanation to my question and a part of usability and user experience requirements I have.

I changed it with your css code and it works. But I think or my thinnk is, that it doesn´t look very good, because it´s just the colors and not the original icons. But this my own feeling about the looking.


#8

Oh I see…

So, let us know if you need more help :slight_smile:

Regards,
Awan