Question

我使用Font Awesome 5.0.10（SVG + JS）渲染一些社交媒体图标。

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

我没有SVG专家，所以我试图了解是否有一些简单的方法可以控制较低的空白空间，从而使图标全部与公共基线对齐。

Answer 1

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

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

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

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