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

声明:本站所有文章,如无特殊说明或,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。本站所有图片如无特殊说明均为AI生成。
真诚赞赏,手留余香
赞赏
JavaScript,Node.js
支持 Selector API 的 HTML 解析器 node-html-parser
2022-02-28
JavaScript,前端开发
Rollup 教程
2022-03-03
Jone
在什么样的花园里面,挖呀挖呀挖
种什么样的种子,开什么样的花
随机推荐
Node.js 18.x 开始支持内置单元测试
Linux 下 configure、make 、make test/make check、sudo make install 的作用
Nginx 的 location 设置
Linux apt 命令
Debian11 安装笔记1:编译安装Nginx、Naxsi 和 Njs
Rollup 教程
ReferenceError: __dirname is not defined in ES module scope
uni-app 实现暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)的几种方法
CSS 媒体特性 prefers-color-scheme
视频剪辑软件 Shotcut 笔记

微信联系我

夜间模式切换
回到顶部