title: How to use fonts-awesome loading image
body: <p>I made a simple page to test the problem. I want to use a subset of <code>font-awesome</code> icons to I used <code>IcoMoon</code> to generate it. Then I made the following <code>.css</code> file:</p>
  
  <pre><code>@font-face {
          font-family: 'fontawesome-webfont';
  src: url('file:///C:/Users/i/Desktop/fontawesome-webfont.eot');
  src: url('file:///C:/Users/i/Desktop/fontawesome-webfont.eot?#iefix'), 
       url('file:///C:/Users/i/Desktop/fontawesome-webfont.woff'), 
       url('file:///C:/Users/i/Desktop/fontawesome-webfont.ttf'), 
       url('file:///C:/Users/i/Desktop/fontawesome-webfont.svg#FontAwesome') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>And in my <code>.html</code> file I have the relevant <code>css</code> :</p>
  
  <pre><code>&lt;style&gt;
  .icon:after {
      content : '\f110';
      font-family: 'fontawesome-webfont';
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and html:</p>
  
  <pre><code>&lt;span class="icon"&gt;&lt;/span&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>This way I see the image but it's static. From the official page of <code>fonts-awesome</code> i read this:</p>
  
  <blockquote>
    <p>Use the icon-spin class to get any icon to rotate. Works well with
    icon-spinner and icon-refresh.</p>
  </blockquote>
  
  <p>And the following example:</p>
  
  <pre><code>&lt;i class="icon-spinner icon-spin icon-large"&gt;&lt;/i&gt; Spinner icon when loading content...
  </code></pre>
  
  <p>the above is not doing anything for me. So I copy-pasted the styles for <code>.icon-spin</code> which seems to be:</p>
  
  <pre><code>-moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  animation-name: spin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: initial;
  animation-fill-mode: initial;
  animation-play-state: initial;
  </code></pre>
  
  <p>to my <code>.icon</code> class but still the image is not rotating. Obviously I'm doing something wrong, so how can I make the image to rotate in this simple example. The only requirement is to use <code>content : '\f110';</code> style, because I saw several ways of including fonts and this is the one that I'm sticking to.</p>