How to add a freezing effect to an awesome font?

Question

I have social site icons that are gray. When you hover over them, I want them to change their color (facebook: blue, google +: red, etc.). I played with him, but to no avail. Here is the code:

<li style="float:left;"> <!-- start social bookmarks --> <div style="font-size: 32px; color: grey;"> <i class="icon-facebook-sign" style="margin-left: 0px;"></i> <i class="icon-twitter-sign" style="margin-left: -12px;"></i> <i class="icon-linkedin-sign" style="margin-left: -12px;"></i> <i class="icon-google-plus-sign" style="margin-left: -12px;"></i> </div> <!-- end social bookmarks --> </li> 

Answer 1

you can use:

  .icon-facebook-sign:hover{color:lightblue;} .icon-twitter-sign:hover{color:yellow} 

http://jsbin.com/opeyoy/1/

Answer 2

You can try something like this

 .icon-facebook-sign:hover { background-color:blue; } 

Answer 3

Based on the fact that you already have a default color, you can use these three for facebook, google plus and twitter:

  .icon-facebook-sign:hover { color: rgba(59, 89, 152, .7); } .icon-twitter-sign:hover { color: rgba(0, 172, 237, .7); } .icon-google-plus-sign:hover { color: rgba(172, 0, 0, .7); }