如何在悬停时更改 Font Awesome 堆叠图标的颜色

【问题标题】：How to change color of Font Awesome stacked icons on hover如何在悬停时更改 Font Awesome 堆叠图标的颜色
【发布时间】：2015-09-01 11:02:56
【问题描述】：

我正在使用两个 Font Awesome 图标：

fa-circle-thin
fa-user-plus

它们相互堆叠，形成圆形图标外观。

<span class="fa-stack fa-sm">
 <i class="fa fa-circle-thin fa-stack-2x"></i>
 <i class="fa fa-user-plus fa-stack-1x "></i>
</span>

当我将鼠标悬停在上面时，我希望圆圈用黑色填充，fa-user-plus 变为白色。我怎样才能做到这一点？

参见 JSFiddle：http://jsfiddle.net/ReturnOfTheMac/Lwdaen75/

【问题讨论】：

标签： html css font-awesome

【解决方案1】：

要达到预期的效果，请将fa-circle 图标添加到堆栈中，该图标将在显示时透明 (opacity:0.0) 并在 :hover 上实心 (opacity:1.0)。

例如（也在 JSFiddle 上：http://jsfiddle.net/2hxxuv52/5/）：

HTML

<span class="fa-stack fa-sm">
  <i class="fa fa-circle fa-stack-2x "></i>
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-user-plus fa-stack-1x "></i>
</span>

CSS

.fa-stack        .fa { color: black; }
.fa-stack        .fa.fa-circle-thin { color: black; }
.fa-stack        .fa.fa-circle { opacity:0.0; color:black; }

.fa-stack:hover  .fa.fa-user-plus { color: white; }
.fa-stack:hover  .fa.fa-circle-thin { color: black; }
.fa-stack:hover  .fa.fa-circle { opacity:1.0 }

【讨论】：