À l'aide de la police-génial empilés icône dans un lien

Je suis en train d'utiliser une icône de la pile à l'intérieur d'un lien. Quand je viens de l'utiliser d'une seule icône, tout fonctionne comme d'habitude. Mais lorsque vous essayez d'utiliser un empilées icône, il n'apparaît pas dans le lien, comme une seule icône.

La première méthode que j'utilise est:

<a href="#" class="tweet"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis</a>

Vu: Cassé Empilés Icône

Qui me donne quelque chose où les deux icônes sont à la fois aligné à gauche (à côté du centre) et les icônes s'affichent par-dessus le texte.

J'avais pensé que, y compris la durée avec l'icône de la pile de la classe au lieu d'un seul <i> serait le moyen de le faire, mais il ne l'est pas. Cela fonctionne bien:

<a href="#" class="tweet"><i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis</a>

Vu: Inline icônes

Je ne suis pas sûr où placer le récipient <span>, ou si il doit y avoir plus de styles ajoutée. J'ai essayé différentes combinaisons. Réglage de la a à display:block n'aide pas (il n'y a pas d'autres styles appliqués pour le lien).

Quand il n'y a pas de texte dans le lien, le résultat est le même. Réglage de la .icon-stack classe de conteneur à display:block ne l'aider à travailler, mais il n'est pas parfait, car la base de l'icône est d'autant plus grand que l'icône sur le dessus.

Elle ce quelque chose de possible? Ou suis-je en repoussant les limites de la façon dont empilées les icônes doivent être utilisés?

OriginalL'auteur helloerik | 2013-06-16

  1. 7

    C'est corrigé dans la 3.2.1-wip de la branche. Ou vous pouvez attendre pour la sortie de demain. 🙂

    OriginalL'auteur Font Awesome

  2. 13

    Ici vous allez..

    <a href="http://google.com">
    <span class="icon-stack">
        <i class="icon-check-empty icon-stack-base"></i>
        <i class="icon-twitter"></i>
    </span>
    link text
    <br/>
</a>

    Durée définie sur inline-block pour s'assurer que l'icône reste en place

    body {
    color:#00000;
}
a {
    text-decoration:none;
    color:inherit;
    display:block;
}
span.icon-stack {
    display:inline-block;
}

    Démo: http://jsfiddle.net/aB4nU/1/

    Peut-être que vous pourriez voter jusqu'ma réponse ensuite.
    Jusqu'votes requièrent 15 réputation, désolé.
    Je l'ai fait en votre nom 😉

    OriginalL'auteur adaam