FontAwesome Stack Replace on Hover

Question

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.

score 5 · Accepted Answer · answered Nov 04 '16 at 12:22

5

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>

answered Nov 04 '16 at 12:22

Charantej Golla

598
3
13

Thanks, Welome to stackoverflow ;) – Charantej Golla Nov 04 '16 at 12:40
@CharantejGolla this is simple and less complex than using the :nth-child selectors, and solves the question perfectly. However, I'd consider using the nth-child selectors as an example of how the solution can be more flexible to other use-cases. – Ant Nov 04 '16 at 12:42
@Ant Thanks for the comment :) – Charantej Golla Nov 04 '16 at 12:44
Thanks for the warm welcome. :) @Ant I'll look into that as well. Thanks! – oreo27 Nov 04 '16 at 13:12
@oreo27, no problem. Charantej Golla already had a great answer, I just wanted to suggest a way you can make it more dynamic if you need the same functionality for other icons. – Ant Nov 04 '16 at 13:39

score 2 · Answer 2 · answered Nov 04 '16 at 12:32

You can achieve this in CSS by combining the :hover and :first-child/:last-child CSS selectors.

.fa-stack.fa-lg:hover :first-child:before {
  content: "\f111";
}

.fa-stack.fa-lg:hover :last-child:before {
  content: "\f024";
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

FontAwesome Stack Replace on Hover

2 Answers2