Hover on social icons

You can use CSS to do the trick, check out https://www.w3schools.com/cssref/sel_hover.asp
to get some idea of the hover selector and then you can add the css to your theme css or preferably to your child theme.

Thanks, but… I can’t find out what to change where…?

/* =Social Icons
-------------------------------------------------------------- */
#footer .social-icons {
  list-style: none;
  line-height: normal;
  padding: 0;
  margin: 0;
  text-align: right;
}

#footer .yelp-icon,
#footer .vimeo-icon,
#footer .youtube-icon,
#footer .twitter-icon,
#footer .facebook-icon,
#footer .linkedin-icon,
#footer .rss-feed-icon,
#footer .instagram-icon,
#footer .pinterest-icon,
#footer .foursquare-icon,
#footer .google-plus-icon,
#footer .stumble-upon-icon {
  display: inline;
  margin: 1px;
  padding-left: 3px;
}

Try this

.twitter-icon{
display: inline;
margin: 1px;
padding-left: 3px;
height:24px;
width:24px;
background:transparent url(‘twitterbird.png’) center top no-repeat;
}

.twittericon:hover {
background-image: url(‘twitterbird_hover.png’);
}

Thanks, it works just fine now, BUT BUT BUT – only underneath an icon I can’t controle…

I left the code in my child-theme, so you can see the effect.

#footer .twitter-icon{display: inline; margin: 1px; padding-left: 3px; height:24px; width:24px; background:transparent url('https://jeanjensen.dk/wp-content/themes/responsive-child/core/icons/twitter-icon.png') center top no-repeat;}

#footer .twitter-icon:hover {background-image: url('https://jeanjensen.dk/wp-content/themes/responsive-child/core/icons/twitter-icon-hover.png');}

you can remove the img in the html.

As per the theme developer’s request, please post in the theme’s dedicated forum: https://cyberchimps.com/forum/free/responsive/

A better Answer
add a class to the link

<a href="https://twitter.com/me" class="twitterbird" title="Twitter link"></a>

remove the image as mentioned before

Subject moved to:

https://cyberchimps.com/forum-topic/hover-on-social-icons/