Bootstrap 5 彻底移除 glyphicon 支持，必须引入 bootstrap-icons.css 才能使 bi- 类生效；仅替换 class 名无效，因 bi- 依赖外部 CSS 提供的 SVG 数据 URI 或字体规则。
Bootstrap 3 升级到 5 后，glyphicon 图标必然不显示——这不是配置问题，是官方彻底移除支持。必须切换到 bootstrap-icons，且不能只改 class 名，引入方式、加载顺序、CSS 作用域都得同步调整。
为什么直接替换 class 名（如 glyphicon-search → bi-search）仍不显示
因为 Bootstrap 5 不再内置任何图标字体或 SVG 资源。bi- 类名只是 CSS 选择器，背后依赖独立的 bootstrap-icons.css 文件提供样式规则和 SVG 数据 URI。没引入它，浏览器根本不知道 bi-search 该渲染什么。
- 检查开发者工具 Elements 面板：如果
<i class="bi-search"></i>元素存在但无内容，大概率是 CSS 没加载成功 - 确认
bootstrap-icons.css在bootstrap.css之后加载；放前面会导致颜色、尺寸继承错乱 - CDN 引入时注意路径是否带版本号，例如
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css，漏掉/font/子路径会 404
如何正确引入 bootstrap-icons.css
引入位置和方式直接影响图标能否生效，尤其在构建工具或框架中容易出错。
- 纯 HTML：放在
中，且在bootstrap.css之后、自定义 CSS 之前 - Angular：必须把
"node_modules/bootstrap-icons/font/bootstrap-icons.css"加进angular.json的styles数组，不是组件 TS 里的import，也不是styleUrls - Vue CLI 或 Vite：推荐用
import 'bootstrap-icons/font/bootstrap-icons.css'写在main.js或main.ts顶部，确保全局可用 - Webpack：确保
css-loader和file-loader（或asset/resource）能处理.css和其中引用的字体/SVG 资源
bi- 图标命名与使用注意事项
命名不是按语义推导，而是严格对应图标文件名，大小写、连字符、后缀（如 -fill）都不能错。
立即学习“前端免费学习笔记（深入）”；
- 搜索图标是
bi-search，不是bi-search-icon或bi-searching - 实心星标是
bi-star-fill，空心是bi-star；两者 CSS 规则不同，不能混用 - 颜色控制直接设
colorCSS 属性即可，fill会被覆盖；别用background-color，SVG 图标不响应这个 - 尺寸用
fs-*类（如fs-5）或font-size，不要依赖旧版icon-large这类已废弃类
Bootstrap Table 等插件图标丢失的根源
像 bootstrap-table 这类插件会根据 Bootstrap 版本自动匹配图标前缀，但它的判断逻辑和你实际引入的图标库可能不一致。
- 插件内部
getIconsPrefix()方法返回'bi'，但它默认假设你用了bootstrap-icons；如果你实际引入的是font-awesome，就得手动覆盖该返回值为'fa' - 检查插件初始化时是否传了
icons:配置项，例如icons: { refresh: 'bi-arrow-clockwise' } - 某些老版本插件硬编码了
icon-前缀，需配合 CSS 重写规则，例如.icon-refresh::before { content: '\f021'; font-family: 'bootstrap-icons' !important; }
最容易被忽略的一点：所有图标类名（bi-*）都依赖 CSS 中定义的 font-family: 'bootstrap-icons' 或 SVG data URI，一旦页面上有其他 CSS 重置了 font-family 或设置了 all: unset，图标就会消失——务必在开发者工具里逐层检查 computed styles 中的 font-family 和 background-image 是否正常。
