Changing colors and resizing genericons in the Social Media Icons widget

• 

  egm28 · Member · May 27, 2016 at 1:52 am

  • Copy link
  • Add topic to favorites

  Hi:

  I just added the “Social Media Icons” widget on my homepage. I just wanted to know if there was a code(s) to change the colors of the icons or “genericons.” Are there codes to change all three icons (that’s how many I have listed) into the same color and/or to change each icon into a different color? I don’t know which way I want to go with yet so that’s why I’m asking for both ways.

  Also, is there a way to make the icons bigger?

  My website link: https://ebonymcfarland.wordpress.com/
  Theme: Fontolio

  Thank you,

  Ebony McFarland

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

• 

  egm28 · Member · May 27, 2016 at 5:17 pm

  • Copy link

  Nevermind. I just figured it out.

• 

  siobhyb · Member · May 29, 2016 at 10:23 pm

  • Copy link

  Hi there,

  I’m glad to see you were able to resolve your question with the following CSS:

  :first-of-type.genericon::before, [data-icon]:first-of-type::before {
  	margin-left: 0;
  	font-size: 33px;
  	color: #ffffff;
  	background-color: #404041;
  	margin-top: 25px;
  }
  
  .genericon-facebook.genericon:hover::before, [data-icon]:hover::before {
  	color: #000;
  	background-color: #9d73b2;
  }
  
  .genericon-twitter.genericon:hover::before, [data-icon]:hover::before {
  	color: #000;
  	background-color: #e58624;
  }
  
  .genericon-linkedin.genericon:hover::before, [data-icon]:hover::before {
  	color: #000;
  	background-color: #9d73b2;
  }

  You know where to find us if any extra questions come up. :)

• 

  egm28 · Member · May 30, 2016 at 2:51 pm

  • Copy link

  OK, thank you.