Q:

fadein/fadeout in swappign fontawesome icon

My code is this with included FontAwesome 4.7
Js code:
$('#icon').click(function(){
      $(this).attr("class", "fa fa-iconA");

Html code:
<i id="icon" class="fa fa-iconB" aria-hidden="true"></i>

I wish that the iconA - iconB swap after click is animated, like fadeout/fadein.
How can I do? Is it the right way to swap between 2 icons after a click?

A:

You cannot fadeIn, FadeOut icon like this by changing their class. 
In order to create a fadeIn and FadeOut effect, you need to play with opacity. 
Please try below example

jQuery('.icon').click(function(){
  jQuery('.icon').toggleClass('hidden');
})
.icon-wrap{
  position:relative;
  background:#333;
  height:25px
}

.icon-wrap .icon {
  color:#fff;
  position:absolute;
  left:0;
  top:0;
  transition:linear all 0.5s;
  cursor:pointer;
  
}

.icon-wrap .icon.hidden{
opacity:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ICON Example

<div class="icon-wrap">
<i class="fa fa-twitter icon icon1"></i>
<i class="fa fa-facebook icon icon2 hidden"> </i>
</div>


Click on icon to see effect

