IonIcons删除间距

Question

如何删除图标上顶部和底部的间距？

我在我的html中使用它，如下所示：

<div><i className="close ion-ios-close-empty" /></div>

这是所有离子图标的默认样式：

display:inline-block;
font-family:"Ionicons";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
font-size: inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale

close类如下：

.close{
   color: #ffffff;
   font-size: 50px;
}

​

​

我没有给它添加任何样式，我只是增加了字体大小，但图标的显示与照片上的一样。

有没有办法去掉顶部和底部的间距？

Answer 1

这有点晚了，但我的解决方案是将行高设置为0.6em：

.close{
   color: #ffffff;
   font-size: 50px;
   line-height: 0.6em;
}

它更像是一种变通方法，但如果您使用line-height属性来使用liite，您可以获得很好的结果。

提示:如果你想选择阴影，使用text-shadow而不是box-shadow。

Answer 2

如果您想要20px的高度，请使用行高属性。

示例：

[selector] {
    line-height: 20px;
}