Change the color of the Social Icons

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.

/* START OF Change the color of the Social Icons */
/* Change the color of all the Social Icons */
.navbar-inner a.social-icon                 {color:red;}     /* Header */
footer#footer .colophon  a.social-icon      {color:red;}     /* Footer */
/* END OF Change the color of the Social Icons */

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.

/* START OF Change the color of the Social Icons */
/* Change the color of individual Social Icons */
a.icon-feed             {color:#DC622C;}    /* Change to desired color */
a.icon-twitter          {color:#00B6F1;}    /* Change to desired color */
a.icon-facebook         {color:#3B5998;}    /* Change to desired color */
a.icon-google           {color:#C20806;}    /* Change to desired color */
a.icon-instagram        {color:#2C6A93;}    /* Change to desired color */
a.icon-tumblr           {color:#34465D;}   /* Change to desired color */
a.icon-flickr           {color:#FF1981;}   /* Change to desired color */
a.icon-wordpress        {color:#04769C;}    /* Change to desired color */
a.icon-youtube          {color:#C31A1E;}    /* Change to desired color */
a.icon-pinterest        {color:#C91517;}    /* Change to desired color */
a.icon-github           {color:#040204;}    /* Change to desired color */
a.icon-dribbble         {color:#333333;}    /* Change to desired color */
a.icon-linkedin         {color:#04669A;}    /* Change to desired color */

/* Alternative - Change the color of individual Social Icons when hovering, otherwise darkgrey */
a.icon-feed             {color:darkgrey;}   /* Change to desired color */
a.icon-twitter          {color:darkgrey;}   /* Change to desired color */
a.icon-facebook         {color:darkgrey;}   /* Change to desired color */
a.icon-google           {color:darkgrey;}   /* Change to desired color */
a.icon-instagram        {color:darkgrey;}   /* Change to desired color */
a.icon-tumblr           {color:darkgrey;}   /* Change to desired color */
a.icon-flickr           {color:darkgrey;}   /* Change to desired color */
a.icon-wordpress        {color:darkgrey;}   /* Change to desired color */
a.icon-youtube          {color:darkgrey;}   /* Change to desired color */
a.icon-pinterest        {color:darkgrey;}   /* Change to desired color */
a.icon-github           {color:darkgrey;}   /* Change to desired color */
a.icon-dribbble         {color:darkgrey;}   /* Change to desired color */
a.icon-linkedin         {color:darkgrey;}   /* Change to desired color */

a.icon-feed:hover       {color:#DC622C;}    /* Change to desired color */
a.icon-twitter:hover    {color:#00B6F1;}    /* Change to desired color */
a.icon-facebook:hover   {color:#3B5998;}    /* Change to desired color */
a.icon-google:hover     {color:#C20806;}    /* Change to desired color */
a.icon-instagram:hover  {color:#2C6A93;}    /* Change to desired color */
a.icon-tumblr           {color:#34465D;}   /* Change to desired color */
a.icon-flickr           {color:#FF1981;}   /* Change to desired color */
a.icon-wordpress:hover  {color:#04769C;}    /* Change to desired color */
a.icon-youtube:hover    {color:#C31A1E;}    /* Change to desired color */
a.icon-pinterest:hover  {color:#C91517;}    /* Change to desired color */
a.icon-github:hover     {color:#040204;}    /* Change to desired color */
a.icon-dribbble:hover   {color:#333333;}    /* Change to desired color */
a.icon-linkedin:hover   {color:#04669A;}    /* Change to desired color */
/* END OF Change the color of the Social Icons */

Similar Snippets:
Change Social icons
Change the size of the Social Icons
Changing the social link’s titles displayed on mouse hover

23 thoughts on “Change the color of the Social Icons”

pubpubpub
26 September 2016, 22 h 33 min

Does ebay have one?
- Menaka S
  27 September 2016, 2 h 51 min
  
  You can add ebay or any other custom social icon in this manner: http://presscustomizr.com/snippet/add-new-custom-socials-icons/
  - pubpubpub
    27 September 2016, 16 h 39 min
    
    Thank you!
Mitesh
16 February 2015, 6 h 40 min
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?
```
 .navbar-inner a.icon-feed:hover  {color:#DC622C;}
.navbar-inner a.icon-twitter:hover    {color:#00B6F1;}   
.navbar-inner a.icon-facebook:hover   {color:#3B5998;}    
.navbar-inner a.icon-google:hover     {color:#C20806;}   
.navbar-inner a.icon-instagram:hover  {color:#2C6A93;}   
.navbar-inner a.icon-wordpress:hover  {color:#04769C;} 
.navbar-inner a.icon-youtube:hover    {color:#C31A1E;}    
.navbar-inner a.icon-pinterest:hover  {color:#C91517;}    
.navbar-inner a.icon-github:hover     {color:#040204;} 
.navbar-inner a.icon-dribbble:hover   {color:#333333;}
.navbar-inner a.icon-linkedin:hover   {color:#04669A;}

footer#footer .colophon a.icon-feed:hover  {color:#DC622C;}
footer#footer .colophon a.icon-twitter:hover    {color:#00B6F1;}   
footer#footer .colophon a.icon-facebook:hover   {color:#3B5998;}    
footer#footer .colophon a.icon-google:hover     {color:#C20806;}   
footer#footer .colophon a.icon-instagram:hover  {color:#2C6A93;}   
footer#footer .colophon a.icon-wordpress:hover  {color:#04769C;}   
footer#footer .colophon a.icon-youtube:hover    {color:#C31A1E;}    
footer#footer .colophon a.icon-pinterest:hover  {color:#C91517;}    
footer#footer .colophon a.icon-github:hover     {color:#040204;} 
footer#footer .colophon a.icon-dribbble:hover   {color:#333333;}
footer#footer .colophon a.icon-linkedin:hover   {color:#04669A;} 
```
Your help is appreciated.
- Nicolas
  16 February 2015, 18 h 35 min
  
  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
    16 February 2015, 19 h 19 min
    
    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
20 November 2014, 12 h 07 min

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
19 July 2014, 16 h 52 min
Hi,

it can be so easy, the CSS code for custom icon in my example is:
```
a.custom-icon:hover {
content: "\\f410";
color: #FFFFFF;
}
```
You can see the result on: http://raul-blog.de

Thx again for this great theme and all its options !!!
- Nicolas
  22 July 2014, 15 h 58 min
  
  Nice results, thanks for sharing!
Stefan
19 July 2014, 15 h 52 min
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:
```
navbar-inner a.custom-icon-content-f410:hover       {color:#FFFFFF;}    /* Header */
```
Thx
Mayank Pandey
6 June 2014, 10 h 43 min

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 ????
- Dave Bardell Post author
  11 June 2014, 14 h 41 min
  
  That’s already covered in this snippet. For example:
  a.icon-facebook:hover {color:#3B5998;} /* Change to desired color */
Chris
14 December 2013, 20 h 43 min

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?
- Dave Bardell Post author
  16 December 2013, 14 h 35 min
  
  Thanks for the feedback. I’ve updated the Snippet.
Gloria Lewis
11 December 2013, 22 h 22 min

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
  12 December 2013, 11 h 57 min
  
  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.
Dave Bardell Post author
29 November 2013, 17 h 23 min

Updated to show ‘darkgrey’ and the brand color when mouse hovers over.

Thanks to @bull01 for the inspiration.
Pete
29 November 2013, 1 h 08 min

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
- Dave Bardell Post author
  29 November 2013, 17 h 20 min
  
  Yes, and resolved by email!
Ananda Chakraborty
27 November 2013, 22 h 14 min

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……
- Nicolas
  28 November 2013, 9 h 21 min
  
  Hi Ananda, just modify the color in the above code provided by Dave, with your desired colors.
  - Joshua
    12 December 2013, 20 h 04 min
    
    Hello can i know how to place the search bar on top of the nav bar at my left if my social icons are at the right
    - Nicolas
      14 December 2013, 14 h 28 min
      
      Hi Joshua, I might publish a snippet about that in the coming days.
      Stay tuned and enjoy the theme!

Comments are closed.

AUTHOR

Dave Bardell

23 thoughts on “Change the color of the Social Icons”