title: Datatables refresh button and spin awesome icon
body: <p>I'm using datatables and Font Awesome 4.4.0 and I would like to create a refresh button. So I create this</p>
  
  <pre><code>&lt;!-- Main content --&gt;
  &lt;section class="content"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="box"&gt;
                  &lt;div class="box-header"&gt;
                      &lt;h3 class="box-title"&gt;Fleets&lt;/h3&gt;
                      &lt;span style="cursor:pointer"&gt;&lt;i class="fa fa-refresh pull-right" aria-hidden="true" id="refreshButton"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.box-header --&gt;
                  &lt;div class="box-body"&gt;
                      &lt;!--  Fleets table --&gt;
                      &lt;table id="fleetsTable"
                          class="table table-bordered table-striped"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Applications&lt;/th&gt;
                                  &lt;th&gt;Fleet name&lt;/th&gt;
                                  &lt;th&gt;Creation date&lt;/th&gt;
                                  &lt;th&gt;Statistic&lt;/th&gt;
                                  &lt;th&gt;Edit&lt;/th&gt;
                                  &lt;th&gt;Delete&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
      ....
  </code></pre>
  
  <p>and in javascript I have(as @Dekel suggested)</p>
  
  <pre><code> $('#refreshButton').click(function(){
     $(this).addClass('fa-spin');
     var el = $(this);
     fleetTable.ajax.reload(function() {
         el.removeClass('fa-spin');
     });
  });
  </code></pre>
  
  <p>If I use <a href="http://jsfiddle.net/xhwfnh61/" rel="nofollow noreferrer">jsfiddle</a> it works fine but in my page it doesn't work, the spin tag is ignored, so the icon is static.
  In this page I use angularJs, may be this the problem (I tried also with only html code, with spin even added but it doesn't work yet)?
  My first step was test only HTML code:</p>
  
  <pre><code>&lt;i class="fa fa-refresh fa-spin fa-3x fa-fw"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>and it didn't work.
  So here:
  <a href="https://i.stack.imgur.com/iv2P0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iv2P0.jpg" alt="enter image description here"></a>
  I import font-awesome.min.css
  Many thanks
  <a href="https://i.stack.imgur.com/bSCbq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bSCbq.jpg" alt="enter image description here"></a>
  <strong><em>RESOLVED</em></strong>: I have updated my awesome css with the new version and it works. The code provided by @Dekel has helped me to remove spin after table refresh.</p>