Base dans la police Awesome documentation Je crée cette icône:
<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>
Ce code crée ce code 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>
C'est une icône de drapeau empilée. Je veux changer la couleur de l'icône sur l'événement Hover, j'ai essayé avec tous ceux-ci:
.fa-stack:hover{
color: red
}
.fa-stack i:hover{
color: red
}
.fa-stack i before:hover{
color: red
}
mais ne fonctionne pas.
si vous voulez changer uniquement la couleur du drapeau sur hover
, utilisez ceci:
.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>
utilisez -! important - pour remplacer le noir par défaut
.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>