title: How to put a spinning fontawesome icon inside a link?
body: <p>I'm using FontAwesome 3.1.0, and this simple code doesn't work as one would normally expect:</p>
  
  <pre><code>&lt;a href="/"&gt;
      &lt;!-- other html content --&gt;
      &lt;i class="icon-spinner icon-spin"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Simply changing the <code>a</code> tag to <code>div</code> makes it work.</p>
  
  <p>How to make the CSS3 animation work? Or is this not possible? I would rather <strong>not</strong> change it to <code>div</code> and make a link-like behavious via JS.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>The code above actually works, like on jsfiddle. It doesn't work on my page, though. There must be some underlying conflict that I can't figure out.</p>
  
  <p>Example: <a href="http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released" rel="nofollow">http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released</a> </p>
  
  <p>Try editing <code>a.post-agree-amount:first</code> where there is a <code>&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;</code>. When I change that to <code>&lt;i class="icon-spinner icon-spin"&gt;&lt;/i&gt;</code>, it doesn't animate. If you move this <code>&lt;a&gt;</code> around the DOM with the browser code inspector, it still doesn't animate. But once I change <code>&lt;a&gt;</code> to <code>&lt;div&gt;</code>, it animates.</p>
  
  <p>I'm using Google Chrome 28.0, but also saw this behaviour in Firefox 22.0.</p>