Comment mettre un coup de fontawesome icône à l'intérieur d'un lien?

Je suis en utilisant FontAwesome 3.1.0, et ce simple code ne fonctionne pas comme on pourrait normalement s'attendre:

<a href="/">
    <!-- other html content -->
    <i class="icon-spinner icon-spin"></i>
</a>

Il suffit de changer de a tag div.

Comment faire le travail d'animation de CSS3? Ou n'est-ce pas possible? Je préfère pas changer de div et de faire un lien comme comportement via JS.

Mise à JOUR:

Le code ci-dessus fonctionne réellement, comme sur jsfiddle. Il ne fonctionne pas sur ma page, si. Il doit y avoir un conflit sous-jacent que je ne peux pas comprendre.

Exemple: http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released

Essayez de modifier a.post-agree-amount:first où il y a un <i class="icon-thumbs-up"></i>. Quand je change que pour <i class="icon-spinner icon-spin"></i>, il n'a pas les animer. Si vous déplacez ce <a> autour du DOM avec le navigateur inspecteur de code, ça ne fonctionne toujours pas les animer. Mais une fois que j'ai changer <a> à <div>, il anime.

Je suis en utilisant Google Chrome 28.0, mais aussi vu ce comportement dans Firefox 22.0.

OriginalL'auteur André Staltz | 2013-07-24

  1. 15

    Trouvé le problème et la solution.

    Animations CSS3 apparemment ne fonctionne pas avec les display: inline éléments, et Bootstrap css avait une règle qui fait <i> icône éléments ont display: inline. Sauf pour <i> icône éléments à l'intérieur de a.btn, Bootstrap css a une règle à appliquer display: inline-block.

    Donc, tout ce que nous devons faire, c'est faire display: inline-block à ceux i.icon-spinner.icon-spin à l'intérieur de la des liens.

    (Merci Praveen pour les commentaires utiles)

    C'était vraiment très utile. Merci!

    OriginalL'auteur André Staltz

  2. 0

    Votre code fonctionne, violon. Mais vous devriez avoir les icônes de la balise <i> à l'extérieur de la anchor balise, sinon il va être hyper liés.

    Changer votre comme cette

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

    Travail Violon

    Merci pour ceci, cependant voir le jour dans la question.
    Permettez-moi de vérifier et de mettre à jour vous.
    pas sûr. vous parlez de cette s23.postimg.org/hoap78kq3/yep.png ? Dans google chrome, v28
    Salut, je parle de la <i> balise à l'intérieur la <a> tag.
    Est-ce que vous faites allusion, s9.postimg.org/4ciqxi8rj/nop.png ?

    OriginalL'auteur Praveen