将图标字体字形与文本对齐

Question

我正在做一个网站，但在图标对齐方面遇到了一些问题。我到处研究了解决方案，但一直没有找到。

基本上，每次我使用图标并使其小于主文本（例如 14 像素）时，图标都会被强制向下几个像素，如果我保持相同大小，则不会被强制向下，而是向下延伸。这可以用position: relative; top: [pixels]px; 纠正，但感觉很脏。我已经尝试过垂直对齐基线和中间，我也尝试了一些其他的东西。

这是一个图标小于文本的示例：

这是一个图标与文本大小相同的示例。

问题不大，但图标应与文本对齐。似乎很多人都有这个问题，但没有任何解决方案对我有用。

解决办法是什么？我应该考虑图像而不是图标字体吗？或者 SVG，也许？当我尝试使用 SVG 图标时，我遇到了同样的问题。

Answer 1

以前，我责怪字体。现在，随着进一步的工作，字体似乎部分归咎于 - 奇怪的字体大小会使事情发生并且需要调整以使元素对齐。因此，始终可以选择调整字体本身。

如果字体仍然无法使用，或者您无法编辑字体，则可以使用 <span> 和 position: relative;top: -1px（或任何其他 px/em/rem 值，直到看起来正确）来解决问题。但这对跨浏览器不太友好——在 Firefox 中，这让事情看起来很正确，在 IE 和 Edge 中也是如此。但在 Chrome 中，一切都偏离了 0.5-1 像素。

奇怪的是，CSS 重置似乎无法解决这个问题。