CODEWITHSUNDEEP
csstwitter-bootstraphoverfont-awesome
Typeconor
Typeconor

Reputation: 13

How to add :hover affects to fa-fa icons?

I couldn't find out how to add the pseudo :hover to the "Font-awesome" icons (fa-fa icons).

If somebody could help i would be greatly appreciative.

HTML:

<a href="#" class="overview"><i class="fa fa-user fa-2x" style="margin-top:10px;"></i></a><br />
<a href="#" class="tier"><i class="fa fa-level-up fa-2x" style="margin-top:10px;"></i></a>

CSS:

.overview, .tier {
    color: black;
}

a:hover {
    color: red;
}

Upvotes: 0

Views: 11748

Answers (1)

Busata
Busata

Reputation: 1118

The code you posted works, but it'll also color any text that contains. If you want to apply the color only when you hover the icon, put it on the class fa like you did with the a tag.

.fa:hover { 
    color: red
}

or if you want to specify it per icon:

.fa-level-up:hover {
   color: blue;
}

Upvotes: 1

Related Questions