瞭解堆疊圖標的尺寸和對齊

我喜歡FontAwesome及其堆疊機制，並希望爲「非照片文件」創建圖標（...無論如何，我只是想表明它可以做的，沒有更深層次的目的...）瞭解堆疊圖標的尺寸和對齊

見例如@http://jsfiddle.net/mbaas/s00uh5ce/1/

我構建一個堆棧一個圖標結合了兩個人的堆棧（我認爲他們需要因爲要分別堆放垂直調整...）。

基本上我有這樣的塊：

<span class=" fa-stack fa-4x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;"> 
    <i class="fa fa-file-o fa-stack-1x fa-3x"></i> 
    <span style="top:1em;left:.25em" class="fa fa-stack-1x"> 
     <i class="fa fa-camera fa-stack-1x"></i> 
     <i style="color:red;" class="fa fa-ban fa-stack-2x"></i> 
    </span> 
</span>

正如您在小提琴看到，indidual圖標看起來不錯，但我與這些相對於周圍的文本對齊掙扎。我希望看到的是這些圖標與它們後面的文本共享相同的基線 - 但我不想將任何東西應用於文本 - 如果所有調整都可以在圖標本身內完成，那將會很棒。 ..

來源

2015-11-02 MBaas

您可以申請vertical-align:bottom;父跨度，所以你的第一個是：

<span class=" fa-stack fa-1x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em; vertical-align:bottom; "> 
    <i class="fa fa-file-o fa-stack-1x fa-3x"></i> 
    <span style="top:1em;left:.25em" class="fa fa-stack-1x"> 
     <i class="fa fa-camera fa-stack-1x"></i> 
     <i style="color:red;" class="fa fa-ban fa-stack-2x"></i> 
    </span> 
</span> 
blablabla

在Centering FontAwesome icons vertically and horizontally

見附圖

來源

2015-11-03 16:55:55 Songsparrow

瞭解堆疊圖標的尺寸和對齊

回答

相關問題