html - FontAwesome 堆栈在悬停时替换

Question

所以我一直在尝试做一个快速动画来替换悬停时的整个跨度，但我似乎无法让它工作。我应该如何处理悬停时替换跨度？

<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<h1>to this</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<h1>on hover</h1>

样本 CodePen在这里。

Answer 1

通过更改悬停时 twitter 的 :before css 属性，您可以实现输出。

span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff}

span.fa-stack:hover i.fa-square-o:before{content:"\f111"}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>