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 Joel Bantly
Joel Bantly
14,752 Points

Icon Hover State

Hi ya, So, I have SVG icons from icomoon and I would like to have the whitespace in the icons change color when in the hovered state but adding a hex color doesn't yield any results, what am I doing wrong? Do I need to use png icons with transparency to achieve this? Any help would be great!

6 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

I am sure you are aware that SVG's have a transparent background by default so any whitespace will be that of the color of it's parent's background.

If you want to change colors of specific aspects of the icon it has to be inline within the HTML, unless you directly edit the SVG in an editor (I recomend Inkscape as it doesn't add extra code the way Illustrator does). Then you could edit the SVG code to add classes to the shapes/paths.

Some resources:

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

You shouldn't need to use a png. What css property are you changing?

Joel Bantly
Joel Bantly
14,752 Points
Joel Bantly
Joel Bantly
14,752 Points

I have the icons with a class of "social-icon" and I just want the whitespace in the logo to change color while the logo stays black. The css I have it .social-icon:hover {color: blue};

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

I'm guessing this icon is a knockout so you should change the background-color.

Joel Bantly
Joel Bantly
14,752 Points
Joel Bantly
Joel Bantly
14,752 Points

Hmmm, that worked. I'd like the color to match the circular shape of the logo instead of the square shape. I can probably mess with the border radius to do that.

Joel Bantly
Joel Bantly
14,752 Points
Joel Bantly
Joel Bantly
14,752 Points

There we go, Sean, the tutsplus link is helping a lot.

Thanks for the answers guys!

Sean T. Unwin
Sean T. Unwin
28,690 Points

My pleasure and good luck. :)