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>