jqueryfont-awesometoggleclass

Font-Awesome icon won't change onclick

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

Solution

  • 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..."?