bootstrap 5 默认不自带 font awesome 或 iconify，需单独引入官方图标库 bootstrap-icons；它独立于主框架，通过 svg 或字体方式使用，支持 color、font-size 控制，且与 bootstrap css 变量联动。
Bootstrap 5 默认不自带 Font Awesome 或 Iconify，得自己加
Bootstrap 5 官方图标库 bootstrap-icons 是独立包，和 Font Awesome、Remix Icon 等第三方图标库完全无关。它不自动加载外部字体或 SVG 图标服务，也不在 bootstrap.min.css 里打包任何第三方 icon 字体文件。如果你看到项目里有 fa-solid 或 ri-home-line 类名，那一定是手动引入的。
常见错误现象：fa-home 不显示、控制台报 Failed to load resource: the server responded with a status of 404 ()（找不到 font 文件）、图标变成方块或小方框。
- 确认你没误以为 Bootstrap CSS 已包含 Font Awesome —— 它没有
- 检查
<link>标签是否指向了正确的 CDN 地址，比如 Font Awesome 的https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css - 注意 CSP（内容安全策略）可能拦截远程字体资源，本地开发没问题，上线后需配置
font-src
用 bootstrap-icons 是最轻量、零冲突的方案
官方图标库 bootstrap-icons 是纯 SVG sprite + CSS 类封装，无字体渲染依赖，不占额外 HTTP 请求（可内联），且与 Bootstrap 5 的 CSS 变量（如 --bs-primary）天然联动。
使用场景：需要稳定、可维护、不引入新字体协议的中小型项目；团队不想为图标单独配构建流程；对 IE11 兼容性无要求（它基于 SVG <use></use>）。
- 安装：
npm install bootstrap-icons，然后在 CSS 中@import "bootstrap-icons/font/bootstrap-icons.css" - 用法直接：
<i class="bi bi-alarm"></i>，支持 fill 颜色继承、font-size缩放、响应式 - 性能优势：单个 CSS 文件约 42KB（gzip 后 ~14KB），无字体文件下载，无 FOIT（Flash of Invisible Text）问题
- 缺点：图标数量约 2000 个，少于 Font Awesome Pro（10k+），且不支持动态图标动画（如旋转 loading）原生类
Font Awesome 引入后容易和 Bootstrap 的 .btn 或 .text-* 类冲突
Font Awesome 的 fa 类默认设 display: inline-block 和固定 width/height，而 Bootstrap 5 的 .btn 内部图标常靠 em 单位缩放，一旦混用 fa-lg 和 btn-sm，尺寸错乱、垂直居中偏移很常见。
典型表现：按钮里的 <i class="fas fa-plus btn-icon"></i> 在 .btn-sm 下比文字高半像素；text-danger 对 fa 图标无效（因为 FA 自带 color 覆盖）。
- 解决方案一：重置 FA 图标基础样式，加一段 CSS：
i.fa { color: currentColor; width: auto; height: auto; vertical-align: -0.125em; } - 解决方案二：改用 Font Awesome 的 SVG + JS 方式（
@fortawesome/react-fontawesome或fontawesome-svg-core），绕过字体类冲突 - 兼容性注意：FA v6 默认禁用 Web Fonts，启用需显式调用
library.add()和config.autoReplaceSvg = 'nest'
别用 @import 在 SCSS 里加载第三方图标 CSS
很多项目在 main.scss 里写 @import "https://cdn.jsdelivr.net/npm/font-awesome@6.5.0/css/all.min.css";，这在大多数构建工具（Vite、Webpack）里会直接报错或静默失败 —— 因为 @import 只接受相对路径或已解析的模块，不支持 HTTP URL。
正确做法取决于你的构建环境：
- Vite：在
index.html的里用<link rel="stylesheet">引入 CDN；或npm install @fortawesome/free-solid-svg-icons后按需导入 JS 图标 - Webpack + Sass：用
sass-resources-loader或把图标 CSS 放进src/assets/手动@import "./assets/fa.css" - 如果硬要用 SCSS
@import加载远程资源，必须配node-sass+custom importer，但维护成本远高于直接 link
真正容易被忽略的是：图标 CSS 文件里的 url(...) 字体路径，在通过构建工具 import 时可能被重写失败，导致字体 404 —— 这比类名冲突更难调试。
