根本原因是为inline元素、按baseline对齐且fa图标默认字号偏大导致视觉上浮；解决只需两步：给图标加align-middle类并配me-2间距，同时确保fa6类名完整（如fa-solid fa-home）且cdn引入正确。
Navbar里图标不居中、文字错位、点击热区变小——根本不是FontAwesome没加载，而是没处理好 inline 元素对齐和 Bootstrap 5 的 flex 布局逻辑。
图标在 nav-link 里上浮、和文字不对齐怎么办
默认 <i></i> 是 inline 元素，按 baseline 对齐，而 FA 图标 font-size 略大，视觉上就“飘”了；nav-link 虽用 flex，但没强制对齐子元素。
- 给图标加
align-middle（Bootstrap 5+ 内置类），比手写vertical-align: middle更稳，还兼容暗色模式 - 图标后加
me-2（不是mr-2），提供右侧间距，避免紧贴文字 - FA6 必须写全前缀：
fa-solid fa-home，单写fa-home或沿用旧版fas fa-home都不显示
navbar-brand 里塞图标，为什么高度突兀或换行
navbar-brand 默认是 display: inline-block，直接塞 <i></i> 容易撑高或破坏行流。
- 图标加
align-baseline或align-middle，再统一设font-size: 1.25rem匹配品牌文字大小 - 别给图标加
display: block—— 这会打断内联流，导致换行或垂直偏移 - 响应式折叠时小屏可能截断图标，父容器加
text-nowrap防止文字/图标被挤换行
CSS 版本图标空白、控制台报 404 或 CORS 怎么排查
90% 是 CDN 地址失效、版本混用或路径配置错，不是代码写错了。
- 确认
引入的是 FA6 地址，例如：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> - 浏览器 Network 标签看该 CSS 是否返回 200；若 404，换 CDN 或改本地路径
- 控制台报
net::ERR_BLOCKED_BY_CLIENT？广告拦截插件可能屏蔽了 CDN 域名 - 类名漏
fa-前缀（如只写fa-solid没写fa-solid fa-user）或误用fa-user单类名，都不渲染
要不要换成 SVG 方式
真遇到 CSP 策略拦截、图标加载闪一下、或者需要动态变色/动画时，SVG 是更稳的选择——但代价是放弃 class 控制的简洁性。
- 纯静态页不想跑 JS？直接用
<img src="user.svg">，最省事，但失去颜色/尺寸响应能力 - 要保留交互和主题适配？用官方 JS SDK +
<fa-icon></fa-icon>组件（Angular/React/Vue），或手动写<svg><use href="#fa-user"></use></svg> - 注意：SVG 方式下
fa-spin这类动效类不再生效，得靠 CSS@keyframes或 JS 控制
最常被忽略的一点：FA6 的 fa-solid 和 fa-regular 不是可选前缀，而是互斥风格——fa-solid fa-user 和 fa-regular fa-user 是两个不同字形，混用或漏写都会白屏。
