2

Currently my html looks like this: 

<div class="col-md-4 text-center">
  <i class="fa fa-2x fa-facebook wow bounceIn social"></i>
  <i class="fa fa-2x fa-twitter wow bounceIn social"></i>
  <i class="fa fa-2x fa-google-plus wow bounceIn social"></i>
</div>

I tried doing the following CSS and nothing happened:

fa-facebook:hover {
  color: #006b33;
}

I'm totally new to font awesome, so any help would be appreciated!

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Jennifer Sturgis
  • 45
  • 1
  • 7
  • 1
    It looks like you're missing a `.`.. `.fa-facebook` is a class, therefore the selector should probably be `.fa-facebook:hover`. It works here - https://jsfiddle.net/k5n8755t/ – Josh Crozier Jan 04 '16 at 17:35
  • Possible duplicate of [How to style icon color, size, and shadow of Font Awesome Icons](http://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-font-awesome-icons) –  Jan 04 '16 at 17:55
  • Sorry, I totally missed the keyword `hover`... I have retracted my close vote –  Jan 04 '16 at 17:58

2 Answers2

6

You've got a typo - fa-facebook needs the . in front of it, since it's a class selector.

.fa-facebook:hover { ... }
jack
  • 2,894
  • 1
  • 13
  • 23
1

Just write-

.fa-facebook:hover {
    color: #006b33;
}

Since you are using a 'class' you have forgotten to write '.'(dot) before the class name.

If it would have been an 'id' then use '#'(hash) instead of the dot. The rest would be the same.

sOOsOOry
  • 211
  • 2
  • 4