使用字体大小控制图标

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

这是一个来自 Andy Bell 的巧妙技巧,现在回想起来似乎有点显而易见:如果您将 SVG 的宽度和高度设置为 1em,那么您可以使用 font-size 属性更改其大小。

尝试更改下面 body 元素的 font-size,以查看图标是否随文本一起缩放。

查看 CodePen 上 Andy Bell 的示例
字体大小控制的图标
(@andybelldesign)
CodePen 上。

您几乎总是希望您的 图标与文本对齐,因此此技巧通过在代码中创建这种固有的关系来提供帮助。非常巧妙,对吧?

直接链接 →