Bootstrap 5+ 默认不带任何字体图标，需自行引入；推荐使用官方 bootstrap-icons（纯 SVG + CSS 类，零冲突、无 FOIT），或 Font Awesome（注意版本、路径、风格匹配及加载顺序）。
Bootstrap 5+ 默认不带任何字体图标——glyphicon、fa-home、bi-alarm 这些类名，全得你自己引入，否则就是空白或方块。
用 bootstrap-icons（官方推荐，零冲突）
这是目前最省心、最兼容 Bootstrap 5 的方案：纯 SVG + CSS 类，不依赖 @font-face，无 FOIT（图标闪白），颜色和尺寸直接继承 color 和 font-size。
- 安装：
npm install bootstrap-icons，然后在主 CSS 或 SCSS 中@import "bootstrap-icons/font/bootstrap-icons.css" - CDN 引入（开发/演示快）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> - HTML 直接用：
<i class="bi bi-browser-firefox"></i>—— 注意必须带bi-前缀，且类名与图标文件名严格对应（如browser-firefox.svg→bi-browser-firefox） - 别漏掉
fill="currentColor"：所有官方 SVG 源都带这个属性，所以改父元素的color就能换图标色，不用额外写svg { fill: red }
用 Font Awesome（第三方主流，但要防坑）
它不是 Bootstrap 自带的，也不是“一键替换”——你加了 <link>，但 fa-home 依然不显示，大概率是这四个地方错了：
-
<link>必须放在bootstrap.min.css之后，否则.btn i等高权重规则会干掉你的font-family - 用 v6.x（如
6.5.0），别用 v7+ 的默认 SVG 模式；如果用了 v7，得额外配fontawesome-svg-core并手动初始化，否则fas类无效 - 图标风格别混用：
fas（solid）、far（regular）、fab（brands）必须匹配，<i class="fa fa-home"></i>（v4 写法）在 v6+ 已失效 - 路径类问题只发生在手动下载时：webfonts/ 目录必须存在，且 CSS 里
url(../webfonts/fa-solid-900.woff2)路径要和实际文件位置完全一致
@font-face 引自定义图标字体（容易失效，慎用）
自己做的 my-icon.woff2 在 Bootstrap 项目里常渲染失败，不是路径问题，而是被覆盖了：
-
@font-face声明必须放在所有 Bootstrap CSS 和第三方 CSS 之后，建议塞进你自己的app.css最顶部 -
font-weight和font-style必须写normal，哪怕你只用一个字体文件——Bootstrap 的.btn、.nav-link会强制重置这两个值，写400或italic就匹配不上 - 必须加
font-display: swap，否则首次加载时图标区域空白，用户看到的是“文字回退”而非图标 - 别给
<i class="icon-home"></i>直接设font-family——组件内部样式权重更高；改用伪元素：.icon-home::before { font-family: 'my-icon'; content: '\e900'; }
为什么 <i class="glyphicon-home"></i> 不工作？
因为 Bootstrap 4 移除了 Glyphicons，5 彻底删除。你在文档里看到的 glyphicon 全是历史残留，bootstrap.min.css 里早已没有相关 @font-face 或 :before 规则。
如果你非要用老项目里的 glyphicons-halflings-regular.woff2，得自己补全整套声明：确保 EOT/WOFF/TTF 格式齐全、src 列表按降序写、font-family 名和 CSS 类中引用的完全一致（注意空格和大小写），而且——它仍然会被 Bootstrap 的重置规则压制，最终还得靠伪元素兜底。
真正麻烦的不是“怎么加”，而是“加完谁来管它”。字体图标一旦混进大型 Bootstrap 项目，font-family 冲突、line-height 错位、vertical-align 偏移都是静默发生的。SVG 类方案（bootstrap-icons）之所以推荐，就是因为它绕开了整个字体渲染管线。
