oreo27 oreo27 - 1 month ago 18
CSS Question

FontAwesome Stack Replace on Hover

So I've been trying to do a quick animation that replaces an entire span on hover but I can't seem to get it to work. How should I approach going about replacing a span on hover?

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


Sample CodePen here.

Answer

By changing the :before css properties for the twitter on hover you can achieve the output.

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>