css - IonIcons 删除间距

Question

如何去除 Ion 图标顶部和底部的间距？

我在我的 html 中使用它，例如:

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

这是所有 ionic 图标的默认样式:

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{
   color: #ffffff;
   font-size: 50px;
}

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

有什么办法可以消除顶部和底部的间距吗？

Answer 1

有点晚了，不过我的解决办法是把line-height设置为0.6em:

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

这更像是一种变通方法，但如果您对 line-height 属性稍作调整，您可以获得不错的结果。

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