Font-Awesome icon won't change onclick

Question

This is so simple, but I can't get it to work! On clicking a button, I'd like to change the icon in that button from fa-download to fa-spinner, but the fa-spinner just won't show up!

My HTML is:

<button id='save'><i class='fa fa-download' aria-hidden='true'></i> save work</button>

And my jQuery is:

$('body').on('click', '#save', function(e){
   $('#save').find('i').toggleClass('fa-download fa-spinner');
   $("#save").text("loading...");
});

The text changes to loading, the download icon goes away, but the spinner icon never shows up! What am I missing?!

Answer 1

This is because the .text() function is removing your i element.

Maybe put the "save work" text in a span and target that to change its text to "loading..."?

Answer 2

You can either toggleClass() or use addClass() or removeClass()

$('body').on('click', '#save', function(e){
   $(this).find('i').addClass('fa-download');
   $(this).find('i').removeClass('fa-spinner');
});