Search code examples
htmlcssfont-face

HTML/CSS Icons as fonts usage - Hover change of color

I'm considering starting to use this technic of icons as fonts, as it seems pretty awesome. But I can't seem to figure out how make it change colors on hover of the link. Here is a jsfiddle for you to play with:

http://jsfiddle.net/eNhUf/17/

As you will see, when you hover a text like "caution", the text goes to BLUE, and I would also like the icon/font to go to blue as well.

Does anybody know how to do this?

Thanks.

Solution 
  • .caution.icon:hover:before{content:"\0021";color:green }

    This will make caution icon go green when you hover the link, I'm sure you can customize the idea as you like! http://jsfiddle.net/agentmilindu/eNhUf/24/