这个问题我之前也碰到过！不同Font Awesome图标的视觉设计基线确实存在差异，虽然临时用bottom: -1px能凑效，但这种硬编码的偏移在字体大小调整、不同设备上很容易失效，下面分享几个更健壮的基线对齐方案：

方案1：利用Bootstrap Flex布局垂直居中 #

既然你已经在用Bootstrap，直接给父元素加上d-flex align-items-center类，就能让两个图标在垂直方向完美居中，完全绕开基线差异的问题：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/> 
<p class="d-flex align-items-center"> 
  <i class="fad fa-times-hexagon text-danger fa-fw"></i> 
  <i class="fad fa-fw fa-calendar"></i> 
</p>

原理很简单：Flex布局的align-items: center会强制子元素在交叉轴（垂直方向）上居中对齐，不管每个图标自身的基线在哪里，视觉上都会对齐。

方案2：用CSS垂直对齐统一基线 #

如果不想修改布局结构，可以直接给图标设置vertical-align属性，统一它们的基线位置：

/* 全局统一所有fad图标的垂直对齐 */
.fad {
  vertical-align: middle;
}

/* 或者只针对当前容器内的图标 */
p .fad {
  vertical-align: baseline; /* 也可以试试middle/sub/super，根据实际视觉效果调整 */
}

这个方法是从CSS行内元素对齐的本质入手，把两个图标的基线拉到同一水平线，比硬编码偏移更灵活，适配不同的字体大小场景。

方案3：检查Font Awesome图标版本（可选） #

有时候旧版本的Font Awesome图标可能存在基线不一致的bug，如果你用的版本比较老，可以尝试升级到最新的Pro版本，官方可能已经修复了这类视觉对齐问题。

为什么不推荐硬编码偏移？ #

bottom: -1px这种写法属于“治标不治本”——一旦你调整了图标尺寸、更换了其他图标，或者在高DPI屏幕上显示，这个偏移值可能就不再适用，需要反复调整。而上面的两种方案都是基于布局或CSS标准属性，兼容性和可维护性更强。

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