字體真棒堆疊圖像

我試圖使用字體真棒堆疊圖像列表作爲示例頁面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/

有誰知道如何正確對齊？

預先感謝您

最大

來源

2016-11-10 Max

發生這種情況，因爲.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。

來源

2016-11-10 10:41:23

謝謝詹姆斯，乾淨的解決方案。無論如何，我想知道是否有可能通過編輯一些CSS類保持列表的原始寬度和高度 – Max

的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

來源

2016-11-10 10:39:44

字體真棒堆疊圖像

回答

相關問題