bootstrap 5 默认不带图标，需手动引入官方推荐的 bootstrap-icons 库，类名必须为“bi bi-icon”格式，cdn 或 npm 安装后须确保字体文件正确加载。
Bootstrap 5 默认不带图标，bootstrap-icons 是官方推荐但需手动引入
Bootstrap 5 移除了内置图标支持，不像 v4 那样默认包含 glyphicon。现在用图标必须额外加载——最稳妥的选择是官方维护的 bootstrap-icons 库，但它不是自动随 CSS 或 JS 一起加载的，得自己加 <link> 或 npm 安装。
- CDN 方式最简单：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> - npm 用户需执行：
npm install bootstrap-icons，再在构建流程中确保字体文件被正确复制到public/或输出目录 - 别直接复制旧项目里的
glyphicons-halflings-regular.woff，v5 不识别这套路径和类名，会 404 且无提示
<i class="bi bi-star"></i> 类名必须完整，漏掉 bi 前缀图标就消失
所有 bootstrap-icons 图标类名都强制以 bi 开头，这是 CSS 选择器作用域控制的关键。只写 bi-star 不生效，必须是 bi bi-star（第一个 bi 是通用样式钩子，第二个才是具体图标）。
- 错误写法：
<i class="bi-star"></i>→ 没样式、没图标 - 正确写法：
<i class="bi bi-star"></i>或<i class="bi bi-star-fill"></i> - 填充版（
-fill）和线框版（无后缀）是两套独立 SVG，不能混用逻辑判断 - 自定义 icon font 时若覆盖了
.bi规则，整个图标库都会失效，检查 DevTools 中font-family: 'bootstrap-icons'是否被覆盖
与 Font Awesome 混用时，fa 和 bi 类名冲突风险低，但 CSS 优先级可能翻车
两者类名前缀不同（fa vs bi），不会直接冲突，但若项目里有全局重置 i 标签样式（比如设了 display: inline-block 或 vertical-align），可能让其中一套图标错位或尺寸异常。
- 排查方式：单独打开一个只有
bootstrap-icons的页面，确认图标正常；再引入 FA 后对比渲染差异 - 常见翻车点：
i { font-style: normal; }会影响 FA 的伪元素方案，但对bootstrap-icons（纯字体+class）影响小；不过如果同时用了fa的::before和bi的字体，又没重置font-style，FA 图标可能倾斜 - 建议统一用
<svg></svg>替代方案处理关键图标，避开字体类名竞争
IE11 兼容性断层：Bootstrap 5 已放弃支持，bootstrap-icons 的 SVG 字体也不兼容
如果你还在维护 IE11 项目，别强行套用 Bootstrap 5 + bootstrap-icons。SVG 字体格式（.woff + @font-face）在 IE11 上对部分图标渲染不可靠，尤其带连笔或负空间的图标（如 bi-arrow-left-right）容易显示为方块或空心矩形。
- 临时缓解：回退到
bootstrap-icons@1.9.1，它仍提供 PNG 雪碧图版本，可通过 CSS background-image 使用 - 更现实的路径：改用
bootstrap@4.6.2+font-awesome@4.7.0组合，它们对 IE11 支持明确且文档完整 - 注意
bootstrap-icons的package.json中browserslist已不含 IE，构建工具（如 Vite、Webpack）默认也不会为它生成兼容代码
bi 前缀，以及图标字体文件是否真被浏览器加载成功——看 Network 面板里 bootstrap-icons.woff 状态码是不是 200，而不是只盯着 HTML 写没写对。
