bootstrap 5 不再内置图标，必须手动引入 bootstrap-icons 库；npm 安装后需显式 @import css，cdn 需确保 .css 和 .woff2 均加载成功，html 中类名必须为 bi bi-search 等完整格式，否则静默失效。
Bootstrap 5 不再内置任何图标，glyphicons 已彻底移除，所有图标必须通过独立的 bootstrap-icons 库引入。不装它，bi-search 这类类名不会生效，控制台也不会报错，只会静默显示空白或方框。
npm 安装后必须手动 import CSS 文件
执行 npm install bootstrap-icons 只是把文件下载到 node_modules/bootstrap-icons/，并不会自动加载样式。关键一步是显式引入其 CSS：
- 在全局样式文件（如
src/styles.scss或src/main.css）中添加：@import 'bootstrap-icons/font/bootstrap-icons.css'; - 确保这行代码写在导入 Bootstrap 主 CSS 之后，否则尺寸、颜色继承会错乱
- 不要把它塞进某个组件的
<style scoped></style>里——作用域限制会导致图标类无法生效
CDN 引入要分清“CSS”和“字体文件”两件事
用 CDN 最快，但只加一行 <link> 往往不够。常见失败原因是字体文件没加载：
- 必须同时提供 CSS 和字体资源：CDN 的
bootstrap-icons.css默认依赖.woff2字体，浏览器会自动请求同目录下的bootstrap-icons.woff2 - 验证是否成功：打开开发者工具 → Network 标签页，过滤
bootstrap-icons，确认.css和.woff2都返回 200 - 如果看到 404，说明 CDN 链接不完整或路径被重写；稳妥做法是改用完整 URL：
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css
Angular 项目必须改 angular.json 的 styles 数组
Angular CLI 构建时不会扫描 @import，所以即使你在 styles.scss 里写了 @import，构建后图标仍可能消失：
- 打开
angular.json，找到projects > [your-app-name] > architect > build > options > styles - 把
"node_modules/bootstrap-icons/font/bootstrap-icons.css"加进这个数组，顺序放在你自己的styles.css之后 - 别写成
styleUrls或在组件 TS 中import—— 这些方式在构建时会被忽略
HTML 中 class 名必须带 bi- 前缀且不能省略后缀
icon-search、glyphicon-star 全部失效，新规则是填空式命名不成立，必须严格匹配官方文件名：
- 搜索图标是
bi-search，不是bi-icon-search或search - 实心星和线框星是两个独立图标：
bi-star-fillvsbi-star，删掉-fill就不显示 - 颜色直接用
color: #0d6efd控制，background-color对 SVG 图标无效 - 图标容器推荐用
<i class="bi bi-search"></i>，语义上它只是占位，不是斜体
最容易被忽略的是加载顺序和作用域隔离——尤其在框架项目里，@import 被包裹在局部样式或未参与构建链路时，图标就会“凭空消失”，而浏览器连警告都不给。查 Elements 面板看元素是否存在，比猜错误原因更直接。
