bootstrap icons 是独立于 bootstrap 5 的官方图标库，需单独引入；推荐使用 svg 方式（语义清晰、易控色/尺寸），cdn 需加载 css 和字体文件，npm 安装后路径为 node_modules/bootstrap-icons/font/。
Bootstrap Icons 不是 Bootstrap 5 内置组件
Bootstrap 5 本身不打包任何图标，bootstrap-icons 是一个完全独立的、官方维护的图标库，需要单独引入。很多人在 bootstrap.min.css 里翻半天没找到 bi-heart 类，就是因为误以为它“自带”。
常见错误现象：Failed to load resource: the server responded with a status of 404 ()（请求了 /icons/bootstrap-icons.css 却 404）；或者页面显示方框、问号——说明字体文件或 CSS 没加载成功。
- 使用场景：项目中只需要轻量级 SVG 图标（推荐），或需兼容旧浏览器而用 icon font 方式
- 推荐优先用 SVG 引入方式：语义清晰、可直接控制颜色/大小、无字体渲染延迟
- 如果用 CDN，必须引入两部分：
bootstrap-icons.css（样式）和bootstrap-icons.woff2（字体，仅 font 方式需要） - npm 用户注意：
npm install bootstrap-icons后，CSS 文件路径是node_modules/bootstrap-icons/font/bootstrap-icons.css，不是dist/下
SVG 方式：直接复制粘贴最稳
这是最不容易出错、兼容性最好、也最可控的方式。每个图标都是纯 SVG 标签，复制官网对应图标的代码即可用。
示例：从 Bootstrap Icons 官网 复制 heart-fill 的 SVG：
<svg class="bi" width="32" height="32" fill="currentColor"><use xlink:href="bootstrap-icons.svg#heart-fill"></use></svg>
但注意：xlink:href 在现代浏览器中已不推荐，应改用 href（HTML5+SVG2）：
<svg class="bi" width="32" height="32" fill="currentColor"><use href="bootstrap-icons.svg#heart-fill"></use></svg>
- 必须把
bootstrap-icons.svg文件放到项目静态资源目录（如public/或assets/），否则use href会 404 -
fill="currentColor"让图标继承父元素文字颜色，改文字色就能换图标色 - 不要给
<use></use>直接设fill，它会被<svg></svg>的fill覆盖（除非加!important，不推荐） - 如果用构建工具（Vite/Webpack），可用插件自动内联 SVG，避免手动管理
.svg文件
Icon Font 方式：兼容老浏览器但有坑
适合仍需支持 IE11 或对 SVG 支持不稳定的环境，但要注意字体加载时机和字符映射问题。
引入方式（CDN）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
然后用类名调用：
<i class="bi bi-heart-fill"></i>
- 必须确保
bootstrap-icons.css加载完成后再渲染图标，否则可能闪动或空白（尤其 SSR 或首屏渲染） - 字体文件（
.woff2）路径由 CSS 中@font-face定义，CDN 自动处理；但本地部署时，要确认字体文件路径与 CSS 中声明的一致 -
bi-heart-fill和bi-heart是两个不同图标，前者实心后者线框，别混用 - 图标默认行高受字体影响，可能上下偏移，建议加
vertical-align: middle或用display: inline-flex微调
与 Bootstrap 5 组件一起用时的样式冲突
图标本身不依赖 Bootstrap CSS，但和 btn、input-group 等组件组合时，容易因尺寸/间距不一致显得突兀。
-
btn默认高度含 padding，而<i class="bi"></i>没有，建议统一加fs-5或text-lg类控制字号 - 在
input-group中放图标时，bi类图标默认是inline，可能和 input 基线不对齐，加align-middle更可靠 - 不要给图标加
btn类——它不是按钮，没有交互逻辑；真要可点击，请包一层<button type="button" class="btn p-0">...</button> - 如果项目用了 Sass，可直接
@import "bootstrap-icons/font/bootstrap-icons"，但注意变量命名冲突（比如$enable-rounded不影响图标）
最常被忽略的是 SVG 的 width/height 属性——不设的话默认 16×16，放进 48px 高的按钮里就太小；也不建议只靠 font-size 缩放 icon font，锯齿明显。该设尺寸就设，别省那两行代码。
