title: Font-awesome class fa is not being added with JQuery
body: <p>I have a button where I want the HTML and font-awesome icon to change on an odd number of clicks and revert back on an even number of clicks.</p>
  
  <p>For example, I have a button named <code>mute</code>. If a user clicks on the button, I want the html to change to <code>unmute</code> and the font-awesome class to be replaced. If the user clicks on the button again I want the button to revert back to <code>mute</code> and so on.</p>
  
  <p>This code should work and it does change the URL and the class. But it doesn't add the font-awesome initialization class <code>fa</code>.</p>
  
  <p>When I inspect the element, I get this</p>
  
  <pre><code>&lt;button id="mute" class="btn btn-primary fa-volume-off"&gt; Mute&lt;/button&gt;
  </code></pre>
  
  <p>With JQuery's <code>addClass</code> method you can add multiple classes by separating them with a space. Based on this, the element should be this</p>
  
  <pre><code>&lt;button id="mute" class="btn btn-primary fa fa-volume-off"&gt; Mute&lt;/button&gt;
  </code></pre>
  
  <p>Here is my code</p>
  
  <pre><code>var clicks = 0;
      $("#mute").click(function() {
              clicks += 1;
              if (clicks % 2 === 1) {
                      $(this).html(" Un-mute");
                      $(this).addClass("fa fa-volume-up");
                      $(this).removeClass("fa fa-volume-off");
                      apiswf.rdio_setVolume(0);
              }
              else {
                  $(this).html(" Mute");
                  $(this).addClass("fa fa-volume-off");
                  $(this).removeClass("fa fa-volume-up");
                  apiswf.rdio_setVolume(100);
              }
      });
  </code></pre>
  
  <p>I do not understand why the <code>fa</code> class does not get added.</p>