l'aide d'une icône empilés font-impressionnant dans un lien

Question

Je suis en train d'utiliser une icône pile à l'intérieur d'un lien. Quand je n'utilise qu'une seule icône, tout fonctionne normalement. Mais lorsque vous essayez d'utiliser une icône empilée, elle n'apparaît pas dans le lien comme le ferait une seule icône.

La première méthode que je 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> 

Seen: Broken Stacked Icon

Cela me donne quelque chose où les deux icônes sont à la fois aligné à gauche (décentrée) et les icônes apparaissent au-dessus de le texte.

Je pensais qu'inclure la travée avec la classe de pile d'icônes à la place d'un seul <i> serait le moyen de le faire, mais ce n'est pas le cas. Cela fonctionne très bien:

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

Seen: Inline icons

Je ne sais pas où mettre le récipient <span>, ou s'il doit y avoir plus de styles ajoutés. J'ai essayé différentes combinaisons. Définir le a à afficher: le bloc n'aide pas (il n'y a pas d'autres styles appliqués au lien).

Lorsqu'il n'y a pas de texte dans le lien, le résultat est le même. La définition de la classe de conteneur .icon-stack à display:block l'aide à fonctionner, mais ce n'est pas parfait puisque l'icône de base est beaucoup plus grande que l'icône en haut.

C'est quelque chose qui est possible? Ou suis-je pousser les limites de la façon dont les icônes empilés doivent être utilisés?

Answer 1

Ceci est fixé à 3.2. Branche 1-wip. Ou vous pouvez attendre la sortie demain. :)

Answer 2

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> 

Span ensemble à inline-block pour faire en sorte 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/