Font Super gestapelt Bilder in HTML-Liste

Question

Ich versuche Schrift Ehrfürchtig gestapelt Bilder in einer Liste zu verwenden, wie in der Beispielseite beschrieben http://fontawesome.io/examples/

Liste:

<ul class="fa-ul"> 
    <li><i class="fa-li fa fa-check-square"></i>List icons</li> 
</ul> 

Gestapelte Bilder:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 

Ich kann Bilder nicht richtig ausgerichtet, wie Sie in dieser Geige sehen können:

https://jsfiddle.net/uqL4aLyj/

Weiß jemand, wie man es richtig ausgerichtet bekommt?

Vielen Dank im Voraus

Max

Answer 1

Dies geschieht, weil die .fa-stack Klasse eine height, width und line-height von 2em auf die gestapelten Reihe von Icons gilt. Eine schnelle Möglichkeit sicherzustellen, dass nicht gestapelte Symbole mit gestapelten Symbolen ausgerichtet sind, besteht darin, Ihre nicht gestapelten Symbole selbst als einen einzelnen Symbolstapel zu behandeln.

Sie können dies erreichen, indem Sie Ihre aktuellen Markup ändern:

<li> 
    <i class="fa fa-camera-retro"></i> 
    text 
</li> 

An:

<li> 
    <span class="fa-stack"> 
    <i class="fa fa-camera-retro fa-stack-1x"></i> 
    </span> 
    text 
</li> 

Modified JSFiddle demo.

Answer 2

Die Beispiele auf der Seite fontawesome gestapelte Bilder außerhalb einer geordneten/unsortierte Liste verwendet. Trennt sie mit einem <br> Tag.

<span class="fa-stack fa-lg"> 
    <i class="fa fa-square-o fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x"></i> 
</span> 
First item<br> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 
Second item