font awesome 6 不支持 fa 类名，因其默认启用 svg+js 模式，须改用 fa-solid、fa-regular 或 fa-brands 等新前缀；cdn 引入需确保 js 在 dom 就绪后执行、无 csp 拦截、js 未被禁用，且避免版本混用。
Font Awesome 6 为什么不能直接用 fa 类名？
Bootstrap 本身不内置 Font Awesome，所有图标都靠外部引入。但很多人照着老教程写 fa fa-home，发现图标不显示——因为 Font Awesome 6 默认启用了「SVG + JavaScript」模式，fa 类名已废弃，必须改用 fa-solid、fa-regular 或 fa-brands 这类新前缀。
常见错误现象：<i class="fa fa-user"></i> 渲染为空白，控制台无报错，但图标就是不出来。
- 使用场景：你用的是 Font Awesome 6.x（2022 年后新项目基本都是），且通过 CDN 引入 JS 版本
- 必须改写为：
<i class="fa-solid fa-user"></i>（实心图标）、<i class="fa-regular fa-user"></i>（线性图标）或<i class="fa-brands fa-github"></i> - 如果坚持用 CSS-only 方式（比如不想加载 JS），得手动引入
all.min.css，并确保路径正确；否则图标字体文件（webfonts/）404 也会导致空白
如何让 Font Awesome 图标和 Bootstrap 按钮/输入框自然对齐？
图标默认是行内元素，基线（baseline）和文字不一致，塞进 btn 或 input-group 里常出现上下偏移、大小不匹配。
- 最稳做法：给图标加
align-middle（Bootstrap 5 内置类），它会把图标垂直居中对齐文本中线 - 避免用
vertical-align: middle手动调——不同字体度量值不同，容易在 Safari 或小字号下失效 - 图标尺寸别硬写
font-size: 1.2rem，优先用 Bootstrap 的尺寸类：fs-5、fs-6，和按钮的btn-sm/btn-lg行为一致 - 示例：
<button class="btn btn-primary"><i class="fa-solid fa-download align-middle me-1"></i> 下载</button>
CDN 引入后图标仍不显示？检查这三处硬性依赖
不是代码写错，而是环境没配齐。Font Awesome 6 的 JS 版本有明确运行前提。
-
<script></script>标签必须放在底部，或加defer属性；放在里且没defer，JS 执行时 DOM 还没就绪，图标无法自动替换 - 确保页面没有 CSP 策略禁止内联样式或 eval——Font Awesome JS 会动态注入 CSS，被拦截后图标区域留白
- 检查浏览器是否禁用了 JavaScript；纯静态 HTML 或某些安全插件（如 NoScript）会直接跳过图标渲染逻辑
- 错误信息典型表现：
Failed to load resource: the server responded with a status of 404 ()对应 webfonts 路径错，FontAwesome.dom.i2svg is not a function多半是版本混用（比如引入了 FA 5 的 JS 却用 FA 6 的类名）
要不要把 Font Awesome 打包进 Webpack/Vite 工程？
本地打包比 CDN 更可控，但容易多走弯路。
- 推荐方式：用
@fortawesome/react-fontawesome（React）或@fortawesome/vue-fontawesome（Vue），配合官方 icon 包（如@fortawesome/free-solid-svg-icons），按需导入，体积最小 - 别全局 import
all.js——它包含全部 2000+ 图标，gzip 后仍超 300KB，首屏加载明显拖慢 - 如果非要用纯 CSS 方式（比如在 SSR 模板里），务必确认构建工具能正确处理
@import和字体路径；Vite 用户常卡在url(/webfonts/...)解析成 404，得配publicDir或改用~@fortawesome别名 - 性能影响：CDN 有缓存优势，但首次加载 JS 脚本需额外 RTT；本地打包首屏更快，但更新图标库要重发资源
