字体真棒堆叠图像

Question

我试图使用字体真棒堆叠图像列表作为示例页面http://fontawesome.io/examples/

列表中所述：

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

叠放图片：

<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> 

我无法正确显示图像，如下图所示：

https://jsfiddle.net/uqL4aLyj/

有谁知道如何正确对齐？

预先感谢您

最大

Answer 1

发生这种情况，因为.fa-stack类应用height，width和2emline-height到堆叠组图标。确保非堆叠图标与堆叠图标对齐的一种快​​速方法是将自己的非堆叠图标视为一个图标堆叠。

你可以通过改变你目前的标记实现这一目标：

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

要：

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

Modified JSFiddle demo。

Answer 2

的fontawesome页面上的例子使用的有序/无序列表之外的堆叠的图像。将它们与<br>标签分开。

<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