Change the color of the Social Icons

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

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.

      • 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?


  • 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


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

    You can see the result on:

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

  • Stefan


    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:


  • 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

    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 !!

  • 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.