Font Awesome图标在表格中对齐失效的根本原因是inline元素的baseline偏移叠加单元格vertical-align导致错位，解决方案包括重置vertical-align、禁用自带对齐、改用background-image或伪元素，并统一混用图标的基线基准。
直接用 <i> 嵌入 Font Awesome 图标时对齐失效
常见现象是图标“吊”在文字上方，或整行单元格高度被撑开。根本原因在于：<i> 默认是 inline 元素，但 Font Awesome 的图标字体本身有 baseline 偏移（比如 fa-solid fa-check 自带 vertical-align: -0.125em），叠加单元格默认的 vertical-align: middle 后反而错位。
实操建议：
- 显式重置图标对齐：给图标加
style="vertical-align: text-bottom;"或更稳的vertical-align: -0.125em;（注意单位必须是em，避免像素硬编码） - 禁用图标库自带对齐：若用的是较新版本 Font Awesome，可在全局 CSS 中覆盖
i[class^="fa-"] { vertical-align: initial !important; } - 别把图标包进
<div>或<p>—— 一旦变成块级容器，vertical-align就彻底失效
background-image 方式塞 SVG/ICO 图标最稳定
适合需要统一尺寸、颜色可控、且不依赖字体加载的场景。它把图标当样式处理，完全脱离文档流，不会干扰 vertical-align 或行高计算。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>设置padding-left: 24px;（预留图标宽度） - 用
background-image: url(./icons/check.svg);+background-position: left center;+background-repeat: no-repeat; - 确保
background-size显式设为16px或contain，否则 SVG 可能拉伸变形 - 如果图标需响应式缩放，改用
background-size: 1em;并配合父元素font-size控制
伪元素 ::before 配合字体图标，语义与控制兼顾
比直接插 <i> 更干净，又比 background-image 更易继承颜色和缩放。但必须手动处理定位，否则会覆盖文字或错位。
关键设置：
-
td { position: relative; padding-left: 24px; }（预留空间） td::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }- 必须设
top: 50%+transform: translateY(-50%)，仅靠vertical-align在伪元素上无效 - 如果图标显示为方块，检查是否漏了
font-family或font-weight（Solid 图标需900）
表格中混用不同来源图标时的对齐陷阱
同一行里既有 Font Awesome 图标、又有本地 svg 标签、还有 background-image，极易出现视觉错层——不是高度不一致，就是上下浮动感明显。
根源在于三者基线基准完全不同：
- 字体图标走文字 baseline
- 内联
<svg>默认display: inline，但 viewBox 和vertical-align耦合极深 -
background-image完全按像素定位，不受字体度量影响
唯一可靠解法：全行统一方案。要么全用伪元素，要么全用 background-image；若必须混合，至少强制统一 line-height 和 font-size，并给所有图标容器设 display: inline-block; vertical-align: middle;。
真正麻烦的不是怎么对齐，而是对齐之后换了个浏览器或升级了图标库，偏移又变了——所以别信“调一次就永远稳”，每次更新依赖前，务必在 Chrome/Firefox/Safari 里快速过一遍表格单元格。
