如何调整 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


三,直接使用 postion:relative 、top 和 right 等控制。


基线参考:

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

修改时间 2024-02-21

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
765 文章
4 教程
8 项目
随机推荐
WordPress 自定义模板路径
Nine 主题
Node.js 单元测试
JavaScript 原生拖放
WordPress RESTful API 的授权方式
WordPress 数据库操作
HTML input 元素
MySQL DATETIME 时间查询和转换