39

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

積み上げ旗のアイコンです。ホバーイベントでアイコンの色を変更したいのですが、これらすべてを試しました：

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

しかし、機能していません。

4

2 に答える 2

68

フラグの色だけを変更したい場合は、hoverこれを使用します。

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>

于 2014-09-10T18:23:14.020 に答える