Font Awesome 图标不显示，八成是 没加对或类名写错；必须引入 FA6 官方 CDN（如 cdnjs.com/.../6.5.1/css/all.min.css），并严格使用 fa-solid 等风格前缀（如 fa-solid fa-bath），禁用过时的 FA4 链接和混用 FA5 的 fas 写法。
Font Awesome 图标不显示，八成是 <link> 没加对，或者类名写错了——Bootstrap 5+ 本身不带任何图标，必须手动引入，且 FA6 和 FA5 的类名体系完全不兼容。
确认引入的是 Font Awesome 6 正确 CDN 地址
FA6 的类名（如 fa-solid）和 FA4/FA5（如 fas）不互通，混用直接空白。别用过时的 https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/... 这类链接。
- ✅ 推荐用带 SRI 校验的官方 CDN：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous"> - ⚠️ 如果项目启用了 CSP 策略，需确保
font-src允许 CDN 域名，否则字体文件会被拦截，控制台报 404 或图标变方块 - ? 不要用
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css而不加crossorigin属性——部分浏览器会因 CORS 拒绝加载字体
类名必须写全风格前缀，不能只写图标名
fa-bath 单独写不会生效；FA6 把图标按风格拆开：实心、线性、品牌，每种对应不同字体权重和字形。
- 实心图标（推荐按钮、导航等主视觉）：
fa-solid fa-bath - 线性图标（适合表单、轻量提示）：
fa-regular fa-user - 品牌图标（GitHub、Twitter 等）：
fa-brands fa-github - ❌ 错误写法：
fas fa-bath（这是 FA5 语法）、fa-bath（无前缀，无定义）
在 Bootstrap 组件里嵌入图标要注意对齐和尺寸
<i></i> 是 inline 元素，默认按文字基线对齐，容易“飘高”，尤其在 .nav-link 或 .btn 里。
- 加
align-middle类强制垂直居中：<i class="fa-solid fa-home align-middle me-2"></i>首页 - 避免用
fa-fw（固定宽度）在.input-group里——它会挤压输入框宽度，小屏下易换行 - 调大小优先用 FA 自带类：
fa-xs/fa-sm/fa-lg，比手写font-size: 1.2rem更稳，不破坏 Bootstrap 的响应式缩放逻辑 - 轮播箭头这类控件，务必用
fa-solid，fa-regular太细，小尺寸下几乎不可见
图标变方块或控制台报 font 文件 404？重点查路径和字体族名
手动下载 FA 字体文件部署时，90% 的“方块”问题出在路径没配对，或 CSS 里引用的字体族名与实际加载的不一致。
- 确保
webfonts/目录和 CSS 中的url()路径完全匹配，比如 CSS 里写url("../webfonts/fa-solid-900.woff2")，那文件就得放在your-project/webfonts/fa-solid-900.woff2 - 伪元素方式插入图标（如 Alert 左侧图标）时，
font-family必须写成"Font Awesome 6 Free"，不是"FontAwesome"或"fa"；font-weight: 900对应 solid，400对应 regular - 用开发者工具检查 computed styles，看
font-family是否被覆盖、content的 Unicode 值（如\f05a）是否拼错
最常被忽略的一点：FA6 默认启用 SVG 模式（通过 JS 加载），但如果你只引入了 CSS 版本，又没配好字体路径或字体族名，图标就只剩一个空框——这不是 Bootstrap 的问题，而是 FA 自身渲染链断在了第一步。
