如何安装并使用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> 往往不够。