Font Awesome 5.0.10(SVG+JS)非方形社交图标基线对齐问题咨询

我之前也碰到过一模一样的问题！那些像facebook-f、linkedin-in这类带后缀的品牌图标，因为SVG画布和实际图标路径之间的间距，总是没法和方形图标保持统一基线，看着特别别扭。这里有几个简单好用的解决方法，不用你深入懂SVG也能搞定：

方法1：用CSS强制垂直对齐 #

最直接的方式就是给这些图标加个垂直对齐的样式，把它们拉到基线位置。你可以针对单个图标写样式，或者统一给所有品牌图标设置：

/* 针对单个图标 */
.fa-facebook-f, .fa-linkedin-in {
  vertical-align: bottom;
}

/* 或者全局统一处理所有品牌图标 */
.fab {
  vertical-align: bottom;
}

如果bottom效果不够完美，还可以用transform微调，比如：

.fa-facebook-f {
  transform: translateY(2px);
}

根据你实际的字体大小调整像素值就行。

方法2：配合fa-fw固定宽度类 #

Font Awesome自带的fa-fw（fixed width）类可以给所有图标设置统一的宽度，再结合上面的垂直对齐，能让整体对齐效果更规整。用法很简单，在图标标签里加上这个类：

<i class="fab fa-facebook-f fa-fw"></i>
<i class="fab fa-linkedin-in fa-fw"></i>
<i class="fas fa-square fa-fw"></i>

这个类会让所有图标占据相同的水平空间，再加上垂直对齐的CSS，基本就能实现视觉上的完美对齐了。

进阶方法：手动调整SVG viewBox（可选） #

如果你对CSS调整的效果还不满意，也可以尝试修改SVG的viewBox属性——不过这个需要你找到Font Awesome对应的SVG资源文件。比如找到facebook-f的SVG代码，调整viewBox的y轴偏移量和高度，把图标路径往上移动，消除下方的空白。举个例子，假设原viewBox是0 0 448 512，你可以改成0 -20 448 472（数值仅作参考，需要实际测试调整）。不过这个方法需要修改库文件，升级Font Awesome的时候可能会被覆盖，所以优先推荐前面两种CSS方法。

本质上这个问题是因为Font Awesome的品牌图标是基于统一的方形画布设计，但部分图标路径没有填满整个画布，导致视觉上的基线错位，用CSS调整是最省心的解决方案~

内容的提问来源于stack exchange，提问作者CharlesM