图标与文字对齐的技巧

图标。 它们很流行。 它们有助于补充内容（大多数时候）。 但它们有时也会令人头疼。

一旦您确定了格式（SVG 或图标字体？）并设计了集合，仍需考虑其他因素，其中许多因素会在编码过程中出现。

以下是一个经常出现的优秀问题

@chriscoyier #smashingconf 有任何关于如何将 #svg 图标与文字对齐的建议吗？

— Andreas Sahle (@pixelmord) 2015 年 10 月 20 日

棘手吧？ 对齐图标可能是一项艰巨的任务，尤其是在 您不是负责设计图标的人 的情况下。 我必须坦诚地说，我以为这将是一个简单的问题，可以在一条推文中解决。 但是，在图标和文字之间找到完美的对齐方式，远不止此。

值得庆幸的是，我们可以使用一些通用技巧来确保我们的图标始终与文字完美对齐。

技巧 1：确定图标格式并坚持使用

我理所当然地认为，除了 SVG 之外，还有其他方法可以创建图标。 实际上，有很多方法，如果您包括那些可能被认为过时的，例如，“那可是 2011 年的东西！” 一些例子

• SVG 图标
• 图标字体
• CSS 图片精灵
• 内联图片

无论您喜欢什么（咳咳，SVG，咳咳！），图标的格式与您将它们与文字对齐的方式有很大关系。 假设所有图标都包含在精灵中。 这意味着图标基本上以固定尺寸设置（除非您从大尺寸开始并使用 background-size 缩小），调整内容的大小和 line-height 以匹配图标会容易得多。

SVG 之类的东西的美妙之处在于，它本质上是可伸缩的，并且让您能够更多地依靠 CSS 来帮助对齐事物，而不是依靠设计过程。

这里的教训是：为所有图标选择一种格式，并以此为基础来处理将它们与文字对齐的方式。 您的代码将更易于维护，您的设计师（或您内心的设计师）会感谢您。

技巧 2：使用大小相似的图标

这是一个理想的情况：所有图标的大小完全相同。 假设集合中的所有图标都是 100px 正方形。 这告诉我们我们正在处理的空间大小，并且使对齐变得轻而易举。

我们也知道，这并不总是实际的规则。 图标所占用的空间可能会因我们传递的信息而异。

地图图标比头像图标窄，头像图标比购物车图标窄。 如果您像我一样，您将消除图标周围的空白，以确保文件大小尽可能小。 这很好，但现在我们有了不同尺寸的图标。 如果我们使用 SVG，那么这就可以了，但对于非矢量格式（如 PNG）来说就不那么理想了。 我们可以告诉 SVG 占用固定的空间而不会损失分辨率，但是如果我们使用不一致的尺寸，则非矢量格式会拉伸和扭曲图像。

这里正确的做法是将图标设计规格与正在使用的格式匹配。 如果使用 SVG，则图标可以是任何大小，但尝试在 Illustrator（或您选择的其他设计工具）中使用一致的尺寸画板。 这将有助于使集合中将来的图标保持比例。

如果使用非矢量格式，则始终使用相同的尺寸。 图标在所占空间方面可能有所不同，但这将确保图标始终清晰且按比例显示，无论旁边是什么文本。

技巧 3：将字体大小与图标集的大小相匹配

图标应该像版式一样被对待。 它们要么与文字一起使用，要么替代文字，因此将图标的大小设置为与旁边文字的大小相同的原因与我们喜欢大小一致的字母的原因相同：可读性。

这并不意味着如果您的内容字体大小也是 16px，则图标也必须是 16px。 这意味着要意识到字体大小，并确保您的图标与之很好地互补，无论它比文字大、相同大小还是比文字小。

以下是对齐良好的图标与未对齐良好的图标之间的差异示例。

查看 CodePen 上 CSS-Tricks 的 MyxBrQ。

左侧的示例与内容字体大小更加一致，并且比右侧对齐得更好，尽管两个示例在技术上都已对齐。

技巧 4：使用 CSS 微调外观

归根结底，有一个简单有效的秘诀可以将图标精确地放在您想要与文字对齐的位置

.icon {
  position: relative;
  /* Adjust these values accordingly */
  top: 5px;
  left: 5px;
}

这就是图标看起来与文字完美对齐与图标看起来略微偏离之间的区别。

查看 CodePen 上 CSS-Tricks 的 YqBdxx。

技巧 5：为特定图标使用类名

上面的示例很棒，但您可能已经注意到，位置图标看起来太窄了，而且甚至比音乐符号更远离文本标签。 多么令人恼火！

这就是每个图标的 CSS 可以帮助我们摆脱困境的地方。

<ul>
  <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> Weezer</li>
  <li><svg class="icon-location"><use xlink:href="#icon-location"></use></svg> Santa Monica</li>
  <li><svg class="icon-music"><use xlink:href="#icon-music"></use></svg> Discography</li>
  <li><svg class="icon-sphere"><use xlink:href="#icon-sphere"></use></svg> weezer.com</li>
  <li><svg class="icon-cart"><use xlink:href="#icon-cart"></use></svg> Artist Store</li>
</ul>

/* Match any class name that starts with icon */
[class^="icon"] {
  width: 50px;
  height: 50px;
  position: relative;
  top: 15px;
  margin-right: 10px;
  fill: #fff;
}

/* Reposition the music note icon */
.icon-music {
  right: 5px;
}

呼，好多了！

查看 CodePen 上 CSS-Tricks 的 QNoBVq。

总结

如果您发现对齐图标与文字比您预期的要复杂得多，那么您并不孤单。 简单来说，这实际上取决于您选择创建图标的方法。 从那里，CSS 就很简单了。

这个问题的答案只涉及文字，但还有其他元素涉及图标对齐，例如按钮、表单字段、导航，以及其他许多东西。 我的意思是，响应式设计呢？！ 无论是哪种情况，我发现这里介绍的五个技巧都能帮助我摆脱困境。