How do I add hover effect to Font Awesome?

Question

I have some social site icons that are grey. When you hover over them, I want them to change to their appropriate color (facebook: blue, google+: red, etc.). I've played around with it, to no avail. Here's 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>

related: http://stackoverflow.com/questions/13233991/combine-after-with-hover — xeo, Nov 15 '14 at 05:55

score 6 · Answer 1 · answered Apr 12 '13 at 20:12

6

you can use:

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

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

answered Apr 12 '13 at 20:12

DGA

258
3
15

score 3 · Answer 2 · answered Apr 12 '13 at 20:02

3

You can try something like this

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

answered Apr 12 '13 at 20:02

Sachin

40,216
7
90
102

1

The tricky part is that it should be color vs background-color since these are actually text. – Fernker Apr 12 '13 at 20:44

score 2 · Answer 3 · answered Oct 23 '13 at 22:32

Based on the fact that you already have a default color, you could 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);
  }

How do I add hover effect to Font Awesome?

3 Answers3