Social media icon color.

• 

  andreeaciulac2018 · Member · Aug 1, 2017 at 1:37 am

  • Copy link
  • Add topic to favorites

  Hello,

  Can i add a css to change the color of the icon in social media side bar ?

  In order to bother as less as I can I already tried to addapt this css that i have from “thesacredpath” but to no success because am i still a noob.

  .main-navigation a { color: #00bb44 !important; } .main-navigation a:hover { color: #bb4400 !important; }

  The blog I need help with is: (visible only to logged in users)

• 

  mapetrei · Member · Aug 1, 2017 at 1:40 am

  • Copy link

  This should work:

  .jetpack_widget_social_icons a {
      color: #00bb44;
  }

• 

  mapetrei · Member · Aug 1, 2017 at 1:41 am

  • Copy link

  However, this would change all the icons to that green color. Would you like to have all of them the same color or you would like to have each of them having unique colors?

• 

  mapetrei · Member · Aug 1, 2017 at 1:43 am

  • Copy link

  Also, for the hover effect, you can use this and change the color to your need:

  .jetpack_widget_social_icons a:hover{
      color: #00bb44;
  }

• 

  andreeaciulac2018 · Member · Aug 1, 2017 at 1:43 am

  • Copy link

  yes please. and can it be done with the hover too ?

• 

  mapetrei · Member · Aug 1, 2017 at 1:44 am

  • Copy link

  For the hover effect, here you go:

  .jetpack_widget_social_icons a:hover {
      color: #00bb44;
  }

  Just change the color to what you need.

• 

  mapetrei · Member · Aug 1, 2017 at 1:44 am

  • Copy link

  I don’t know why my post was sent 2 times, but I hope it was helpful :)

• 

  andreeaciulac2018 · Member · Aug 1, 2017 at 1:46 am

  • Copy link

  You help a lot thank you. can it be done individually, to each icon ?

• 

  mapetrei · Member · Aug 1, 2017 at 1:50 am

  • Copy link

  Sure!

  .jetpack_widget_social_icons .icon-facebook {
      color: #00bb44;
  }
  
  .jetpack_widget_social_icons .icon-twitter {
      color: #00bb44;
  }
  
  .jetpack_widget_social_icons .icon-instagram {
      color: #00bb44;
  }

  And the ones with the hover effect:

  .jetpack_widget_social_icons .icon-facebook:hover {
      color: #00bb44;
  }
  
  .jetpack_widget_social_icons .icon-twitter:hover {
      color: #00bb44;
  }
  
  .jetpack_widget_social_icons .icon-instagram:hover {
      color: #00bb44;
  }

• 

  mapetrei · Member · Aug 1, 2017 at 1:50 am

  • Copy link

  Just change the colors to what you need. Please let me know if it works for you, too.

• 

  agounder · Member · Aug 1, 2017 at 12:44 pm

  • Copy link

  Hi darkydeeds,

  You can use the following css

  .widget-area .icon-twitter {
  	color: #0084b4;
  }
  .widget-area .icon-facebook {
  	color: #3b5998;
  }
  .widget-area .icon-instagram {
  	color: #8a3ab9;
  }

  Let us know if you need more help.

  Thanks
  Alexander G.

• 

  mapetrei · Member · Aug 1, 2017 at 12:49 pm

  • Copy link

  Yes @darkydeeds !

  You can also use the code that @agounder posted, if you know for sure that you will have the icons just in the widget area.

  If you plan to use them across the site, in other locations, too, not only the sidebar, you could turn them into this:

  .icon-facebook:hover {
      color: #00bb44;
  }
  
  .icon-twitter:hover {
      color: #00bb44;
  }
  
  .icon-instagram:hover {
      color: #00bb44;
  }

  Having .jetpack_widget_social_icons in front of them would make the code work only when the social icons are served by the jetpack plugin.

• 

  mapetrei · Member · Aug 1, 2017 at 12:50 pm

  • Copy link

  Also here’s the NON-HOVER version:

  .icon-facebook {
      color: #00bb44;
  }
  
  .icon-twitter {
      color: #00bb44;
  }
  
  .icon-instagram {
      color: #00bb44;
  }

• 

  andreeaciulac2018 · Member · Aug 2, 2017 at 1:48 am

  • Copy link

  Thank you both so..so verry much. They all work great except for this one that does not appear to work
  .icon-facebook {
  color: #00bb44;
  }

  .icon-twitter {
  color: #00bb44;
  }

  .icon-instagram {
  color: #00bb44;
  }

• 

  agounder · Member · Aug 2, 2017 at 1:55 am

  • Copy link

  The following worked for me in both Firefox and Chrome when added them as user style sheet and checked your website.

  .widget-area .icon-facebook

  Going a level higher adds more weight to the style is therefore used. It’s something you can do to avoid using ! important in the CSS ;)

• 

  andreeaciulac2018 · Member · Aug 2, 2017 at 2:01 am

  • Copy link

  Thank you Alex.