title: FontAwesome icons inside anchors not animating on chrome
body: <p>I'm trying to animate a fontawesome icon, inside a span it works fine, but when I put the icon inside an anchor it stops working on chrome, on IE it works.</p>
  
  <p>I am using FontAwesome 3.2.1
  and this is my code</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;a&gt;
      &lt;i class="icon-wrench rotator"&gt;&lt;/i&gt; 
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rotator {
      display: inline-block;
      -webkit-animation: rotate 2.5s 4 ease;
      -webkit-transform-origin:90% 35%;
  }
  
  @-webkit-keyframes rotate {
      from {
          -webkit-transform: rotate(-12deg);
      }
  
      to {
          -webkit-transform: rotate(112deg);
      }
  }
  </code></pre>
  
  <p>I tried it with FontAwesome 3.0.2 and it works, when I upgraded to 3.2.1 it stopped working, on chrome at least.</p>
  
  <p>Thanks in advance</p>
  
  <p><strong>Edit</strong>
  I also have more html inside the anchor and I don't want that to rotate so adding the 'rotator' class to the anchor won't do it</p>
  
  <p><strong>Edit</strong>
  This is the actual html (the example above is simplified):</p>
  
  <pre><code>&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
      &lt;i class="icon-bell-alt icon-animated-bell icon-only"&gt;&lt;/i&gt;
      &lt;span class="badge badge-success"&gt;5&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>