font-awesome - ttf - font awesome spinner animation

¿Cambiar de color al desplazar un icono de fuente impresionante?

Question

Base en la documentation Font Awesome creo este icono:

<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>

Este código crea este 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>

Es un icono de bandera apilada. Quiero cambiar el color del icono en el evento Hover, lo intenté con todo esto:

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

pero no funciona

Answer 1

si desea cambiar solo el color de la bandera en el hover use esto:

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>