Bootstrap CSS 必须在 bootstrap-icons.css 之前加载，否则 .bi 类因缺少基础样式和变量依赖而失效；正确顺序为先 bootstrap.css 后 bootstrap-icons.css，本地用 @import 或框架项目中也须遵循此顺序。
Bootstrap CSS 和 bootstrap-icons.css 的加载顺序必须严格固定
图标不显示但控制台无报错，八成是 bootstrap-icons.css 加载在 bootstrap.css 之前。Bootstrap Icons 的类（如 .bi）依赖 Bootstrap 的基础排版、颜色变量（如 currentColor 继承逻辑）和响应式工具类（如 .me-1），如果前置加载，.bi 的 font-size、vertical-align 等默认值会回退到浏览器原生行为，导致图标错位或尺寸异常。
正确做法只有一条：在 HTML 的 中，<link> 引入顺序必须是：
<link href="bootstrap.css" rel="stylesheet"> <link href="bootstrap-icons.css" rel="stylesheet">
本地项目用 @import 也同理——@import 'bootstrap/scss/bootstrap.scss'; 必须在 @import 'bootstrap-icons/font/bootstrap-icons.css'; 之前。
Vue/Vite 或 React 项目里图标类名失效的真正原因
不是图标库没装，而是样式作用域或构建链路断了。Vite 默认不会处理 node_modules 下 CSS 文件的全局注入；React（尤其 CRA）对 @import 支持有限，且不解析 font/ 目录下的字体文件路径。
- Vue + Vite：把
@import 'bootstrap-icons/font/bootstrap-icons.css';写进项目根目录的src/style.scss（或main.ts中import './style.scss'），绝不能放在<style scoped></style>里 - React + CRA：改用
import 'bootstrap-icons/font/bootstrap-icons.css';在src/index.js顶部，确保执行时机早于组件渲染 - React + Vite：同 Vue 方案，但需确认
vite.config.js中未禁用 CSS 导入（默认开启）
验证方式：打开浏览器开发者工具 → Elements 面板 → 找一个 <i class="bi bi-search"></i> 元素 → 查看 Computed 样式中是否包含 font-family: "bootstrap-icons" 和有效 font-size 值。没有，说明 CSS 根本没生效。
.bi 类与 Bootstrap 工具类混用时的尺寸兼容性陷阱
.bi 自身不带固定宽高，它靠 font-size 和字体度量撑开空间；而 Bootstrap 的间距类（如 .me-2）、尺寸类（如 .fs-5）都基于 rem 和 root font-size 计算。一旦你在图标上叠加 .fs-3，.bi 的实际渲染尺寸会跳变，但旁边的 .me-2 间距却按原始 font-size 计算，造成视觉错位。
安全混用方式只有两种：
- 用
.bi自带缩放类：.bi-1x（默认 1em）、.bi-2x（2em）等，它们内部已重置font-size并修正vertical-align - 统一用
style="font-size: 1.5rem;"内联控制，避免和工具类语义冲突
别碰 .text-lg、.fs-4 这类文字专用类——它们不是为图标设计的，.bi 的 SVG 字体度量和普通文本不同，强行套用会导致 baseline 偏移、图标“悬空”或下沉。
实心/线框图标后缀必须显式声明，不存在自动 fallback
.bi-heart 和 .bi-heart-fill 是两个完全独立的字体字形，CSS 类名不匹配就什么都不会显示。Bootstrap Icons 没有“缺省自动补 -fill”机制，也不会在控制台报错。
常见误写：
-
<i class="bi bi-star"></i>→ 显示空心星（线框） -
<i class="bi bi-star-fill"></i>→ 显示实心星（填色） -
<i class="bi bi-star bi-fill"></i>→ 错误！.bi-fill不是合法类，整个图标消失
查图标名最稳的方式：打开 https://www.php.cn/link/cd0bf4755af4c76f48087ad34feb72a0，搜关键词（如 arrow），左侧筛选栏勾选 “Fill” 或 “Outline”，右侧直接复制带后缀的完整类名。本地开发可 ls node_modules/bootstrap-icons/icons/ | grep -i heart 看文件是否存在对应命名。
最容易被忽略的是：SVG 图标本质是字体，它的渲染高度、行内对齐、继承行为全部由字体文件的度量数据决定，而不是 HTML 元素本身。哪怕你把 <i></i> 换成 <span></span>，只要没加 .bi 类，就只是个空容器——这点和 inline SVG 完全不同，别混用思路。
