Bootstrap 5 官方推荐图标库是 bootstrap-icons，bi-search 不显示主因是加载失败：CSS 必须在 bootstrap.min.css 后引入，CDN 需确保 woff2 字体可访问，本地路径勿用 dist/css，Vite/Webpack 需全局注入样式；icon font 与 SVG 两种用法不可混用，前者依赖字体、后者更现代可控。
Bootstrap 5 本身不带图标，bootstrap-icons 是唯一官方推荐、完全解耦的独立图标库；它不是“可选插件”，而是你项目里能合法用上 bi- 类名的唯一来源。
为什么 bi-search 不显示？常见加载失败原因
图标不显示，90% 是加载链路断了，不是写法错。
-
bootstrap-icons.css必须放在bootstrap.min.css之后 —— 否则.bi基础样式（如display: inline-block、vertical-align: middle）可能被覆盖或未定义 - CDN 引入时漏掉字体文件：仅加
不够，如果用的是 icon font 模式（即），还必须确保浏览器能加载到bootstrap-icons.woff2—— 查看 Network 面板，过滤woff2，404 就是路径或 CDN 权限问题 - 本地 npm 安装后路径写错：
@import 'bootstrap-icons/font/bootstrap-icons.css'是对的；@import 'bootstrap-icons/dist/css/bootstrap-icons.css'是错的（dist/下只有 SVG 文件，没 CSS） - Vite / Webpack 项目中，CSS 没被全局注入：比如在组件
里@import，或没在main.ts导入的全局样式文件中声明 —— 图标类根本进不了样式表
两者底层不同，适用场景明确，别混用。
-
+bi-类：走 icon font 渲染，兼容 IE11，但依赖字体加载时机，有 FOIT（Flash of Invisible Text）风险；颜色靠color控制，大小靠bi-1x～bi-4x或font-size；不能单独给某个图标改 fill，因为它是字体字符 -
：纯 SVG，语义强、无渲染延迟、可直接设fill="red"或用currentColor继承文字色；但需把bootstrap-icons.svg放到public/或静态资源目录下，否则href404；现代项目（Vite/Webpack）建议配vite-plugin-svg-icons自动内联，省去手动管理文件 - 不要用已废弃的
xlink:href—— 浏览器控制台会警告，且在 Safari 16+ 等新版中失效；一律用href
Bootstrap Icons 的实际优缺点（不吹不黑）
优点很实在，缺点也得提前踩坑。
-
优点：全免费开源、无调用限制；图标命名规则统一（
bi-heart/bi-heart-fill明确区分线框/实心）；SVG 源文件可直接下载编辑；CDN 更新及时（当前最新稳定版是@1.13.1） -
缺点：没有动态图标（如旋转 loading）、不支持图标动画（需自己加 CSS
@keyframes）；bi-类不支持按需导入（Webpack/Vite 无法 tree-shake 单个图标）；部分小尺寸图标在 Retina 屏上边缘略糊（因字体渲染机制，非 SVG 方式更明显） -
容易被忽略的细节：带
-fill后缀的图标（如bi-star-fill）和不带的（bi-star）是两个独立图标，不能通过 CSS 切换 fill 状态来“切换”——它们是不同fill属性控制
