font awesome 图标不显示的主因是cdn链接错误或类名拼写错误；fa6需用fa-solid等前缀，不可混用fa5的fas；推荐svg方案解决csp与闪烁问题，并用text-reset等语义类适配暗色模式。
Font Awesome 图标不显示，检查 CDN 链接和类名拼写
图标不出现，八成是 link 没加对，或者类名写错了。Font Awesome 6 和 5 的类名前缀不同，Bootstrap 本身不自带图标，必须手动引入。
- 用 Font Awesome 6（推荐）：在
里加<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> - 类名必须带
fa前缀，比如<i class="fa-solid fa-user"></i>；fa-user单独写不会生效 - 别混用版本：FA5 用
fas fa-user，FA6 改成fa-solid fa-user，混用会导致图标空白 - 浏览器控制台若报 404，说明 CDN 地址失效或路径被拦截，可换
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css
在 Bootstrap 组件中嵌入图标，注意内联样式和尺寸控制
把 <i></i> 塞进 button、nav-link 或 input group 里很常见，但默认尺寸和垂直对齐容易出问题。
- 图标默认是行内元素，和文字基线不对齐，加
align-middle类（Bootstrap 5+）能快速修正：<i class="fa-solid fa-search align-middle"></i> - 想调大小？优先用 Font Awesome 自带的尺寸类：
fa-xs/fa-sm/fa-lg/fa-xl，比直接设font-size更稳 - 在
input-group里放图标时，别忘了加input-group-text包裹：<span class="input-group-text"><i class="fa-solid fa-envelope"></i></span> - 避免给
<i></i>加display: block—— 会破坏按钮内联布局，导致换行或错位
使用 SVG 方式替代 CSS 版本，解决 CSP 或图标闪烁问题
如果项目启用了严格的内容安全策略（CSP），或者页面加载时图标闪一下才出现，说明 CSS + Web Font 方式受限了。这时该切到 SVG。
- 不用
<i></i>，改用官方 JS SDK：在页面末尾加<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js"></script> - 然后写 SVG 标签：
<svg class="svg-inline--fa fa-user fa-w-16" aria-hidden="true"><use href="#fa-user"></use></svg>—— 实际要用fa-icon组件或icon属性，更稳妥的是用<fa-icon></fa-icon>（Angular）或 React 的@fortawesome/react-fontawesome - 纯静态页不想跑 JS？直接下载 SVG 文件，用
<img src="user.svg">最省事，但失去颜色/尺寸动态控制 - 注意：SVG 方式下，
fa-spin这类动画类要换成fa-pulse或手动加 CSS 动画
图标和 Bootstrap 暗色模式冲突，颜色没跟着变
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但 Font Awesome 的图标默认是黑色，暗色模式下就看不清了。
- 别硬编码
color: white—— 会覆盖主题切换逻辑。改用 Bootstrap 的语义色类：<i class="fa-solid fa-bell text-white"></i>或text-body（自动适配亮/暗） - 如果图标在
navbar或card背景上，优先继承父容器文本色：<i class="fa-solid fa-home text-reset"></i>，text-reset会强制用父级 color - 自定义主题时，记得重置
.fa的color，否则暗色模式下图标可能还是深灰，和背景融在一起 - 用
currentColor作为图标 fill/stroke 是最兼容的做法，但需确保你用的是 SVG 版本或启用了autoReplaceSvg: true
