4

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.

2 Answers 2

17

Found the problem and the solution.

CSS3 animations apparently don't work with display: inline elements, and Bootstrap's css had a rule that made <i> icon elements have display: inline. Except for <i> icon elements inside a.btn, Bootstrap's css had a rule to apply display: inline-block to them.

So all we need to do is apply display: inline-block to those i.icon-spinner.icon-spin inside the links.

(Thanks Praveen for useful comments)

0
0

Your code works, fiddle. But you should have the icons tag <i> outside the anchor tag, otherwise it will be hyper linked.

Change your like this

<i class="icon-spinner icon-spin"></i>
<a href="http://google.com">Google</a>

Working Fiddle

3
  • 1
    @STALTZ not sure. are you referring this s23.postimg.org/hoap78kq3/yep.png ? In chrome v28
    – Praveen
    Commented Jul 25, 2013 at 8:14
  • Hi, I'm talking about the <i> tag inside the <a> tag. Commented Jul 25, 2013 at 8:22
  • Almost. That's the a.post-agree, I was referring to a.post-agree-amount Commented Jul 25, 2013 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.