在用户界面元素中使用图标是有帮助的。除了元素的标注，图标可以帮助强化用户元素对用户的意图。但我不得不说，我在浏览网页的时候注意到了一点图标的错位。即使图标的对齐方式是正确的，当元素的排版样式发生变化时，图标也往往不能很好地响应。
我注意到了几个真实的例子，我想分享一下我对如何改进它们的想法。我希望这些技术可以帮助其他人建立用户界面元素，以更好地适应排版变化，同时坚持设计的原始目标。
例子1--网站信息传递
我在一个流行的媒体网站上发现了这个信息传递的例子。图标的位置看起来不是很糟糕。但是当改变元素的一些样式属性如font-size 和line-height ，它就开始解体了。
识别的问题
- 图标被
absolutely定位在使用相对单位的左边缘 (rem) - 因为图标被移出了流程，所以父节点被赋予了一个更大的
padding-left，以帮助整体的间距--理想情况下，我们的padding-x是统一的，无论图标是否存在，一切都看起来不错。 - 图标（它是一个SVG）的大小也是以
rems为单位的--这不允许在其父级的font-size变化时各自调整大小。
建议
指明图标和排版的对齐问题。
我们希望我们的图标的上边缘在蓝色虚线上，但我们经常发现我们的图标的上边缘在红色虚线上。
你是否曾经在一些文字旁边插入一个图标，但它就是不与文字的顶部对齐？你可以用类似position: relative; top: 0.2em 的东西将图标移到适当的位置。这样做的效果很好，但如果将来排版风格发生变化，你的图标可能会看起来不对位。
我们可以更可靠地定位我们的图标。让我们使用元素的基线距离（从一行的基线到下一行的基线的距离）来帮助解决这个问题。
计算基线距离。
基线距离是font-size * line-height。
我们将把它储存在一个CSS自定义属性中。
--baselineDistance: calc(var(--fontSize) * var(--lineHeight));
然后，我们可以使用**（基线距离-字体大小）/2**的结果来向下移动我们的图标。
--iconOffset: calc((var(--baselineDistance) - var(--fontSize)) / 2);
font-size 在1rem (16px)和line-height 1.5 的情况下，我们的图标将被移动4个像素。
- 基线距离 =
16px* 1.5 =24px - 图标偏移 = (
24px-16px) / 2 =4px
例子2--无序列表
我发现的第二个例子是一个无序的列表。它通过一个::before 伪元素为其图标使用了一种网络字体（Font Awesome）。关于有序列表和无序列表的样式设计，已经有很多 很好的文章，所以我就不详细介绍相对较新的 ::marker 伪元素之类的东西了。网页字体通常可以很好地与图标对齐，这取决于使用的图标。
已确定的问题
- 没有使用
absolute定位 - 当使用伪元素时，我们不经常使用flexbox，如我们的第一个例子，absolute定位在这里大放异彩 - 列表项使用了
padding和负text-indent的组合来帮助布局--当考虑到多行文本和图标的可伸缩性时，我从来没有能够让它工作得很好。
建议
因为我们的解决方案中也会使用一个伪元素，所以我们会利用absolute 定位。这个例子的图标尺寸比它相邻的文案要大一些（大约2倍）。正因为如此，我们将改变计算图标top 位置的方式。我们的图标的中心应该与第一行的中心垂直对齐。
从基线距离的计算开始。
--baselineDistance: calc(var(--fontSize) * var(--lineHeight));
使用**（基线距离-图标大小）/2**的结果向下移动图标。
--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) / 2);
因此，在1rem (16px)的font-size ，1.6 的line-height ，以及一个2倍于副本的图标(32px)，我们的图标将得到一个-3.2像素的顶部值。
- 基线距离 =
16px* 1.6 =25.6px - 图标偏移 = (
25.6px-32px) / 2 =-3.2px
用较大的2rem (32px)的font-size,1.2 的line-height, 和64px 的图标，我们的图标将得到一个-12.8像素的顶值。
- 基线距离 =
32px* 1.2 =38.4px - 图标偏移 = (
38.4px-64px) / 2 =-12.8px
结论
对于用户界面的图标，我们有很多选择和技术。我们有SVG、网络字体、静态图像、::marker ，以及list-style-type 。人们甚至可以使用background-colors和clip-paths来实现一些有趣的图标效果。执行一些简单的计算可以帮助以一种更优雅的方式对齐和缩放图标，从而使实现更加防弹。
