FontAwesome |如何讓圖標垂直排列？

我使用字體真棒在我的網站上創建圖標。FontAwesome |如何讓圖標垂直排列？

問題是，一些圖標比圖標的實際圖標內容高，所以它們不會因爲該額外的高度而與基線對齊。

我希望圖標全部在底線上對齊。就像字母如何對齊一樣。爲此，圖標必須與內容一樣高。

這是實際的：在.fa div之前，它比它應該高。這是一個展示3個不同的.fa圖標的想象。其中一個比它應該高。

我在將它從Chrome剪輯之前突出顯示它的內容框爲藍色。

您會注意到圖標的底部由於某種原因而具有額外的空間。這是實際的：之前突出顯示。

IMAGE EXAMPLE

我怎樣才能擺脫這種空間，使圖標坐好聽基線？

來源

2017-08-31 james kampel

是否有在底部對齊？我不認爲你會用這個特殊的圖標來做到這一點，除非你做了一些沉重的操作和手動抵消來解釋圖標下方邊界框中的空白區域。 –

@TylerSells這些是並排按鈕。他們看起來並不正確，沒有垂直排列在一起。 –

我的意思是你可以很容易地將它們對齊到父容器的頂部而不是底部，因爲問題間距位於圖標的底部。但是，看看你的例子，看起來他們已經排在最前面。我有個主意。讓我做一些測試，我會回來與你 –

請參閱本codepen例如：https://codepen.io/vtsells/pen/oeJKNz

基本上我做了什麼被包裹在一個父容器的問題圖標，這樣我可以再對照一下身高應該是。由於我可以通過這種方式控制圖標的高度，因此我可以控制邊界框在對齊方面的位置。在此示例中，通過彈性框完成對齊。 display:flex; align-items:flex-end //flex-start to align to the top, center to align to the vertical center

HTML：

<div id="container"> 
    <i class="fa fa-trash-o fa-2x"></i> 
    <i class="fa fa-clock-o fa-2x"></i> 
    <div id="wrapper"> 
    <i class="fa fa-check-square-o fa-2x"></i> 
    </div> 
</div>

CSS：

#container{ 
    background:#888; 
    display:flex; 
    align-items:flex-end; 
    padding:10px; 
} 
#wrapper{ 
    background:#ccc; 
    overflow:hidden; 
    height:29px; 
    width:30px; 
} 
i{ 
    background:#ccc; 
}

來源

2017-08-31 20:06:35

首先，我想要圖標底部對齊。所以我將代碼更改爲align-items：flex-end。但是，這仍然存在同樣的問題。 –

即使所有內容都對齊，右邊的最後一個圖標仍然會在底部留出額外的空間，這會阻止對齊。 –

你可以張貼一下發生了什麼？當我按照你的建議對齊它時，它將所有內容對齊到底部 –

FontAwesome |如何讓圖標垂直排列？

回答

相關問題