CODEWITHSUNDEEP
htmlcssfont-awesome
André Staltz
André Staltz

Reputation: 13984

How to put a spinning fontawesome icon inside a link?

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.

Upvotes: 4

Views: 16074

Answers (2)

Andr&#233; Staltz
Andr&#233; Staltz

Reputation: 13984

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)

Upvotes: 17

Praveen
Praveen

Reputation: 56501

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

Upvotes: 0

Related Questions