Bootstrap 5+ 必须用 Font Awesome 替代已移除的内置图标，推荐 CDN 引入 v6.5.0 all.min.css 或按需加载；注意类名前缀 fas/far/fab 区分，避免与旧版 fa 混用，并补充 aria-hidden 或 aria-label 保障可访问性。
Bootstrap 5+ 项目必须用 Font Awesome 替代内置图标
Bootstrap 5 开始已彻底移除 .glyphicon 等所有内置字体图标，官方文档明确推荐第三方方案，而 Font Awesome 是目前最稳妥的选择——它不依赖 JavaScript、纯 CSS + 字体驱动、类名体系与 Bootstrap 的 btn/card 等组件天然共存，换图标只需改 class，不用动任何逻辑。
常见错误现象包括：fa-camera 不显示、图标变成方块、控制台报 CORS 或 font-display 加载失败。根本原因通常是 CDN 版本不匹配、漏引 CSS、或误用了旧版类前缀（如仍写 fa fa-camera 却引入了 v6+ 的 @fortawesome 模块化包）。
CDN 引入时注意版本与类名风格对应
国内开发建议优先用这个 CDN 链接（稳定、无跨域风险）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">它支持全部三种风格：
fas（solid）、far（regular）、fab（brands），比如 <i class="fas fa-user"></i> 和 <i class="fab fa-github"></i> 必须严格区分前缀，混用会直接不渲染。
容易踩的坑：
- v4.x（如
4.7.0）用fa前缀，v5+ 统一升级为fas/far/fab，老项目迁移时不能只换 CDN，还得批量替换 HTML 中的 class - 如果用了
all.min.css，体积约 800KB；生产环境建议按需加载，比如只引入solid和brands：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/fontawesome.min.css"><br><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/solid.min.css"><br><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/brands.min.css">
- 本地部署时，务必确认字体文件路径正确，否则 Chrome 控制台会报
Failed to load resource: net::ERR_ABORTED类错误
对比 Bootstrap Icons：SVG vs 字体，选哪个？
Bootstrap Icons 是官方推出的 SVG 图标库，设计语言统一、质量高、原生支持 currentColor 和响应式缩放，但它是纯 SVG，每个图标都要单独写 <svg>...</svg> 或用 JS 动态注入，无法像 Font Awesome 那样靠一个 class 控制全部样式（颜色、大小、旋转）。
适用场景差异：
- 需要快速迭代、大量复用图标的中后台系统 → 选
Font Awesome，font-size和color直接生效，transition动画也自然 - 对可访问性（a11y）和 SEO 要求极高、图标数量少且固定 →
Bootstrap Icons的 inline SVG 更可控，支持aria-label和focusable="false" - 已有大量
fa-xxx类名的存量项目 → 别硬切 SVG，维护成本远高于收益
性能与兼容性关键点
Font Awesome 在 IE11 下仍能正常工作（v5.15.4 是最后一个完整支持 IE 的版本），但 v6+ 已放弃 IE 支持；如果你的项目还需兼容 IE，必须锁定 v5 CDN 并禁用 font-display: swap（避免图标闪白）。
移动端要注意：
- 图标在 iOS Safari 中偶尔出现模糊，加
-webkit-font-smoothing: antialiased;可缓解 - 不要给
<i>标签设display: block后又居中，容易破坏行内对齐，改用text-align: center或 Flex 容器更稳 - 图标尺寸建议用
fa-xs/fa-sm/fa-lg等内置 class 控制，避免直接写font-size: 1.25rem导致不同图标 baseline 不一致
真正难处理的是图标语义缺失问题：比如 <i class="fas fa-search"></i> 对屏幕阅读器不可读，必须补 aria-hidden="true"，若图标承载功能（如搜索按钮），则需额外加 sr-only 文字或 aria-label ——这点常被忽略，但直接影响 WCAG 合规性。
