如何安装并使用Bootstrap Icons图标库？

本文共计874个文字，预计阅读时间需要4分钟。

Bootstrap 5 移除了内置的图标，需要通过独立的库引入。所有图标必须使用独立的 +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> 里——作用域限制会导致图标类无法生效

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-fill vs bi-star，删掉 -fill 就不显示
• 颜色直接用 color: #0d6efd 控制，background-color 对 SVG 图标无效
• 图标容器推荐用 <i class="bi bi-search"></i>，语义上它只是占位，不是斜体

最容易被忽略的是加载顺序和作用域隔离——尤其在框架项目里，@import 被包裹在局部样式或未参与构建链路时，图标就会“凭空消失”，而浏览器连警告都不给。查 Elements 面板看元素是否存在，比猜错误原因更直接。