Измените цвет при наведении шрифта на удивительный значок?

20

База в шрифте Awesome документация Я создаю этот значок:

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

Этот код создает этот 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>

Это значок с флагом. Я хочу изменить цвет значка на событии Hover, я попробовал все это:

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

, но не работает.

    
задан JPashs 10.09.2014 в 18:28
источник
  • он должен быть цвета: красный; –  Juan C. 10.09.2014 в 18:30
  • Проверьте свой синтаксис CSS –  samrap 10.09.2014 в 18:31
  • была опечаткой, но проблема все еще там –  JPashs 10.09.2014 в 18:32

1 ответ

34

, если вы хотите изменить только цвет флага на hover , используйте это:

Ссылка

.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>
    
ответ дан Juan C. 10.09.2014 в 20:23
  • И используя Font Awesome 5? use.fontawesome.com/releases/v5.0.4/js/all.js –  Kiquenet 19.02.2018 в 14:44
  • @Kiquenet у вас есть код или jsffiddle с вашей проблемой? –  Juan C. 20.02.2018 в 02:40