Font Awesome Icons：通用基线答案

【问题标题】：Font Awesome Icons: common baselineFont Awesome Icons：通用基线
【发布时间】：2018-04-17 15:00:43
【问题描述】：

我正在使用 Font Awesome 5.0.10 (SVG + JS) 来渲染一些社交媒体图标。

如果我使用平方版本，它们都共享一个共同的基线，因此是对齐的，但非平方版本不是，正如您可以通过查看 svg 框和这些图标中的路径之间的距离看到的那样：

我不是 SVG 专家，所以我想了解是否有一些简单的方法可以抑制较低的空白空间，从而使图标全部对齐到一个共同的基线。

【问题讨论】：

你可以根据需要调整每一个的viewbox
如果你的意思是改变（通过 JS）viewBox 属性的值，那似乎也意味着改变图标的渲染大小，这不是我想要的......此外，如果我要对每个图标进行调整，纯 CSS 解决方案（如 mrcharlie 提出的解决方案）不会那么痛苦。

【解决方案1】：

由于您无法直接（轻松）编辑字体文件，因此您必须根据每个图标手动切换，例如：

.fa-linked-in {
  transform: translateY(1px);
}

<i class="fab fa-linkedin-in"></i>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>

它不是基线对齐的原因是它是中心对齐的，因为这在更多情况下更有用。

【讨论】：