Change color when hover a font awesome icon?

Question

Base in the Font Awesome documentation I create this icon:

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

This code create this html:

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

It is a stacked Flag icon. I want to change the icon color on Hover event, I tried with all these:

.fa-stack:hover{
color: red
}
.fa-stack i:hover{
color: red
}
.fa-stack i before:hover{
color: red
}

but not working.

Jud

it should be color: red; – Kommunarsk

Check your CSS syntax – Silin

was a typo but problem is still there – Jud

Answer 1

if you want to change only the colour of the flag on hover use this:

http://jsfiddle.net/uvamhedx/

.fa-flag:hover {
    color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-flag fa-3x"></i>

Kommunarsk

And using Font Awesome 5 ? use.fontawesome.com/releases/v5.0.4/js/all.js – Ranger

@Ranger do you have codepen or jsffiddle with your issue? – Kommunarsk

Answer 2

use - !important - to override default black

.fa-heart:hover{
   color:red !important;
}
.fa-heart-o:hover{
   color:red !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-heart fa-2x"></i>
<i class="fa fa-heart-o fa-2x"></i>

Dympha

Is !important is really necessary? Many consider it as anti-pattern in programming. – Vertebral

using Important is not a good solution since it cannot be overwritten. You can overwrite all non inline css using specificity – Pratique

I had to use !important to get this to work, unfortunately, but the icon was also within an ag-Grid, if that means anything. For an Angular project, I also had to put it in the styles.css file - it would not work in the component.css – Gimbals

Answer 3

The only thing you need to do is this, example:

HTML:

<span class="close_form">
  <i class="fa fa-circle"></i>
</span>

CSS:

.fa-circle {
  color: #d7d7d710;
  transition: 500ms;
}
    
.close_form:hover .fa-circle {
  color: #43434379;
  transition: 500ms;
}

Keffer