Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Arman Arutyunov
Arman Arutyunov
21,900 Points

I can't change the color of the social icon via :hover

Hey guys!

I'm trying to change the color of my social icons but nothing happens. I tried to google how to do this but there wasn't a better answer than just to change the color in photoshop and somehow replace the basic icon by new one via hover in css.

This is the html code

<footer>
      <a href="http://facebook.com">
        <img src="img/facebook-logo.png" alt="Facebook Logo" class="socialIcon1">
      </a>
      <a href="http://instagram.com">
        <img src="img/instagram-logo.png" alt="Instagram Logo" class="socialIcon2">
      </a>
      <p>&copy; 2016 Waffles</p>
    </footer>

And this is my css

.socialIcon1 {
  background: url(/Waffles/img/facebook-logo.png);
}
.socialIcon2 {
  background: url(/Waffles/img/instagram-logo.png);
}
.socialIcon1, .socialIcon2 {
  display: inline;
  width: 25px;
  height: 25px;
  margin: 0 5px;
}

footer a img.socialIcon1:hover {
  background: url(/Waffles/img/facebook-logo-2.png);
}
footer a img.socialIcon2:hover {
  background: url(/Waffles/img/instagram-logo-2.png);
}

footer {
  text-align: center;
}

1 Answer

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Unfortunately, CSS will not be able to change the actual color properties of your .png file. Often times people will use font based icons as their social media links so that it accepts the CSS rules.

Take a look at https://fortawesome.github.io/Font-Awesome/ and try using their Facebook and Instagram icons. Once you have the stylesheet link (they provide an easy to use CDN) you just add the correct classes for each icon and you're good to go. Your :hover class will work just fine.

<head>

   ....
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   ....

</head>
......

<footer>
  <a href="http://facebook.com">
    <span class="fa fa-facebook"></span>
  </a>

  <a href="http://instagram.com">
    <span class="fa fa-instagram"></span>
  </a>

  <p>&copy; 2016 Waffles</p>
</footer>

.fa {
  color: blue;
}

.fa:hover {
  color: red;
}
Arman Arutyunov
Arman Arutyunov
21,900 Points

Thank you very much. But how is it possible to make icons change their colors like it is on treehouse's footer?

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Exactly the way I showed above. Font Icons can change color via CSS but img tag icons such as your .png file cannot be altered the way you're looking for.