如何调整 iconfont 图标的位置和基线

方法一：直接修改图标的 font-size。

方法二：使用 transform:scale(1.5) 放大图标，需要注意有时在 iconfont 上是无效的，因为 transform 只能使用在块状元素上。比如：display:block 或者 display:inline-block。

图标和文字往往不在一条基线上，常常需要调整 iconfont 图标的位置，最简单的方法是：

.some-div .iconfont{
  position: relative;
  top：0.1rem;
}

另一种方法是使用 vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

vertical-align:-20%;

vertical-align 参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

基线参考：

https://javascript.net.cn/articles/848

iconfont

修改时间 2024-02-21

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。