字體真棒堆疊圖像

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