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

真诚赞赏,手留余香
赞赏
JavaScript,Node.js,HTML
支持 Selector API 的 HTML 解析器 node-html-parser
2022-02-28
JavaScript,前端框架
Rollup 教程
2022-03-03
ngtwewy
随机推荐
使用Node.js http 模块采集数据时的日文 EUC-JP 乱码,使用 iconv-lite 转码
MySQL 表名预处理
MySQL tag设计中,where in参数为带逗号的字符串查询
MySQL 使用 DATE_FORMAT() 和 FROM_UNIXTIME() 格式化时间
Node.js 如何使用 ES6 的模块功能
MySQL 的 sql_mode 模式介绍:为什么 MySQL 中 int,float,double 类型字段插入空字符时自动转为0
iconfont 字体生成原理
MySQL 批量插入数据时如何解决重复问题
中文正则表达式匹配
JavaScript 检查 Date 是否为 Invalid Date

微信联系我

夜间模式切换
回到顶部