Fontawesome 5額外的頂部和底部填充

Question

有什么方法可以刪除Fontawesome 5圖標的多余頂部和底部填充，如圖中所示（在添加紅色背景色之后）

<i class="fab fa-5x fa-facebook" style="background-color: red;"></i>

簡單的小提琴https://jsfiddle.net/68d05etb/15/

Answer 1

要消除文本/圖標中的多余填充，您可以為圖標設置靜態line-height 。

也就是說，如果你的字體-真棒圖標30px高大，但5px的是填充，那么你可以做到以下幾點：

i{line-height: 25px;}

Answer 2

不知道這樣做是否正確，但是更改line-height對我來說不起作用。 我最終通過使用fa-layers創建了想要的效果

<a href="#" class="fa-layers fa-fw" target="_blank"> <i class="fas fa-square" style="color: #FFFFFF;"></i> <i class="fab fa-facebook" style="color: #3C5995;"></i> </a>