I'm using FontAwesome 3.1.0, and this simple code doesn't work as one would normally expect:
<a href="/">
<!-- other html content -->
<i class="icon-spinner icon-spin"></i>
</a>
Simply changing the a
tag to div
makes it work.
How to make the CSS3 animation work? Or is this not possible? I would rather not change it to div
and make a link-like behavious via JS.
UPDATE:
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.
Example: http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released
Try editing a.post-agree-amount:first
where there is a <i class="icon-thumbs-up"></i>
. When I change that to <i class="icon-spinner icon-spin"></i>
, it doesn't animate. If you move this <a>
around the DOM with the browser code inspector, it still doesn't animate. But once I change <a>
to <div>
, it animates.
I'm using Google Chrome 28.0, but also saw this behaviour in Firefox 22.0.