CODEWITHSUNDEEP
htmlcssfont-awesome
Jennifer Sturgis
Jennifer Sturgis

Reputation: 45

How to change font awesome icon hover color?

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!

Upvotes: 2

Views: 9653

Answers (2)

sOOsOOry
sOOsOOry

Reputation: 231

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.

Upvotes: 1

jack
jack

Reputation: 2904

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

.fa-facebook:hover { ... }

Upvotes: 6

Related Questions