Social Media Icon Color Hover

• 

  melissaclaireleslie · Member · Oct 21, 2015 at 1:16 pm

  • Copy link
  • Add topic to favorites

  Apologies if this has been answered before but I have had a look and can’t see anything that works. I’m also not very experienced in CSS so excuse me if I’ve asked a silly question, I have tried to edit the social media icons to my liking and am slowly getting there but I want the icon shade to change upon hover to a lighter shade that matches my background. The following is what I am using;

  aside#wpcom_social_media_icons_widget-3 .genericon{
  font-size: 30px;
  }

  .genericon{
  color: #45afa8 !important;
  }

  .genericon-switch a:hover{
  color: #daf0e9 !important;
  }

  I’ve tried removing and adding the “!important” part and it does nothing. I have tried removing the ” a” part and again it does nothing. I get the feeling it’s something really simple that I am missing?

  Thanks in advance.

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

• 

  g471n · Member · Oct 21, 2015 at 3:36 pm

  • Copy link

  Hi melissaclaireleslie

  This should work for you. Add the following line of custom CSS.

  .genericon:hover {
      color: #DAF0E9 !important;
  }

  To add custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save.

• 

  melissaclaireleslie · Member · Oct 21, 2015 at 3:40 pm

  • Copy link

  Worked like a charm :) thanks so much. Knew it would have been something simple!

• 

  g471n · Member · Oct 21, 2015 at 4:25 pm

  • Copy link

  You are welcome :)