title: Spinning icons strange behavior on IE
body: <p>Using Font Awesome, this creates a spinning icon:</p>
  
  <pre><code>&lt;span class="fa fa-spinner fa-spin"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>When toggling the <code>fa-spin</code> class using JQuery on several icons like this, the behavior differs in different browsers: it works as expected under Chrome and FireFox while only the first occurence is handled correctly under IE or Edge.</p>
  
  <p>For instance, with the following HTML:</p>
  
  <pre><code>&lt;span class="fa fa-spinner fa-spin"&gt;&lt;/span&gt;
  &lt;span class="fa fa-refresh"&gt;&lt;/span&gt;
  &lt;span class="fa fa-spinner fa-spin"&gt;&lt;/span&gt;
  &lt;span class="fa fa-refresh"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>with this simple JQuery code:</p>
  
  <pre><code>$(function () {
    setInterval(function() {
      $('span').toggleClass('fa-spin');
    }, 2000);
  });
  </code></pre>
  
  <p>only the first icon is toggling between spinning and staying still while the other icons are always spinning.</p>
  
  <p>Demo here: <a href="http://codepen.io/anon/pen/qOWxRg" rel="noreferrer">http://codepen.io/anon/pen/qOWxRg</a></p>
  
  <p>How can I fix this so that the behavior is the same with all modern browsers?</p>
  
  <hr>
  
  <p><strong>Edit</strong></p>
  
  <p>The same behavior can be seen when the class is removed only, like this:</p>
  
  <pre><code>$('#icon').addClass('fa-spin');
  setTimeout(function() {
    $('#icon').removeClass('fa-spin');
    $('#icon').height();
  }, 2000);
  </code></pre>