Change the color of the Social Icons


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 7-Apr-15 (3.3.15) 3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

 

Remember to add the Header .navbar-inner and/or Footer footer#footer .colophon prefix before the a.icon or it will default to the Header icons only.

 


Related Snippets you may also like


23 thoughts on “Change the color of the Social Icons

  • Mitesh

    hi, I’m a fan of your theme and really enjoy the flexibility and creativity that is allowed when using customizr theme, including the child-theme that I use on my website.

    I’ve been trying to change the social icons on-hover to change colors, but it default to the Orange. I’ve add the below code to child-theme’s style.css and also in the Customizr child theme’s customize –> Advanced option –> CSS, but things are not working as intended. (On hover color doesn’t change to desired color like FB Blue or google red, but remains Orange ).

    I’m sure I’m missing something very basic and am overlooking something. Can you pls. help identify the issue?

    Your help is appreciated.

    • Nicolas

      Hi !
      I’ve just tested your code in the custom CSS live option and it worked fine !
      You’ll want to check if you are not overriding this setting somewhere else, or add more css specificity if needed.
      Cheers

      • Mitesh

        hi Nicolas,

        Thanks much for the direction. I’ll look deeper to check if anything is over riding the code.
        As I understand, the CSS code from customizr executes first, then child theme’s CSS style.css and then the Custom CSS live option. So, If there is conflicting CSS config., the one that executes last (Custom CSS Live option) will prevail. Is that understanding correct?

        Thanks..

  • Peter Hjalmarsson

    If anyone else needs have their icons in the left column and not in the header or footer, use “.social-block a” prefix instead. It might very well be that it changes the social icons everywhere – I have not checked that.

  • Stefan

    Hi,

    it can be so easy, the CSS code for custom icon in my example is:

    You can see the result on: http://raul-blog.de

    Thx again for this great theme and all its options !!!

  • Stefan

    Hi,

    good work. But what is the CSS Code if i use a custom icon like this for mail:

    .custom-icon:before {
    content: “\\f410”;
    }

    This one doesn´t work:

    Thx

  • Mayank Pandey

    hello, i want to ask u that how to give hover effect on social icons

    suppose, how a facebook icon’s color will change when i take the mouse over it ????

  • Chris

    Hello,
    I tried the above code but i could change the color only to SI placed at header but not those at footer..
    Could you please send me the code for that?

  • Gloria Lewis

    I placed the custom css in the CSS box in the customize tab, but I still do not know how to go about changing the colors of the social icons from there. Is there another section or tab that I should go to to change the colors?

    • Dave Bardell Post author

      Hi there Gloria. Putting the snippet code in your CustomCSS should have changed the colors.

      The way the Snippet was written, the icons will remain grey until you hover the mouse over it – and then it changes color.

      I’ve updated the snippet to give 2 alternatives – default or hover.

  • Pete

    Glad I tripped over this site – brilliant work chaps !

    Quick question, tried using the above code, but the Facebook icon refuses to change from grey. Tried using the first code to change all, tried using the individual, but still no. It’s not an order thing, as I can add another icon after facebook, and that also won’t change

    Am I being a complete idiot ? yes, followed by the solution would be enough 😉

    Thanks !!
    Pete

  • Ananda Chakraborty

    if want social icon are in different color . i.e. facebook in yellow . twitter in blue. linked in in orange and so on .is it possible……

Comments are closed.