<p>Bootstrap 5 必须用 bootstrap-icons 替代已移除的 Glyphicons，通过 CDN 或 npm 引入 CSS，HTML 中用 bi- 前缀类如 bi-search，注意加载顺序、命名规范及 SVG 特性。</p>
Bootstrap 5 项目里怎么加图标？别再找 Glyphicons 了
bootstrap 5 官方已彻底移除 glyphicons，直接用 bootstrap-icons —— 这不是可选项，是唯一推荐路径。你如果还在项目里引用 glyphicons-halflings-regular.woff 或写 class="icon-star"，图标根本不会显示，控制台也不会报错，只会“静默失效”。
正确做法是引入独立的图标库：bootstrap-icons 提供的是 SVG 图标（默认通过 CSS 字体方式渲染），和 Bootstrap 主框架解耦，版本可单独升级。
- CDN 最快：在
<head>中 Bootstrap CSS 之后加一行<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css" rel="stylesheet"> - 本地安装（推荐）：
npm install bootstrap-icons，然后在主样式文件中@import 'bootstrap-icons/font/bootstrap-icons.css'; - 千万别把
bootstrap-icons.css放在 Bootstrap CSS 前面，否则图标颜色、尺寸等继承规则会乱
HTML 里怎么写一个搜索图标？别套旧 class 名
Bootstrap 3 的 icon-search、icon-white 全部作废；Bootstrap Icons 使用统一前缀 bi-，比如搜索是 bi-search，星标是 bi-star-fill。填空式命名不成立，必须查文档或本地文件名。
最常用写法是直接用 <i> 标签加 class：
<span class="bi bi-search"></span>
注意两点：
-
<i>在这里语义上只是图标容器，不是斜体，Bootstrap 官方也明确接受这种用法 - 带
-fill和不带的属于不同风格（实心/线框），例如bi-heart是线框，bi-heart-fill是实心，不能混用或随意删后缀 - 想改颜色？直接设
colorCSS 属性就行，fill会被覆盖；但别用background-color，SVG 图标不响应这个
Vue / Angular / Vite 项目里图标不显示？大概率是路径或加载时机问题
框架项目不是静态 HTML，CSS 加载顺序和作用域更敏感。常见现象：开发时图标正常，构建后消失；或者只在部分组件里生效。
- Vue + Vite：确保
@import 'bootstrap-icons/font/bootstrap-icons.css'写在全局style.scss里，且该文件被main.ts显式导入；别放在某个组件的<style scoped>里 - Angular：必须把
"node_modules/bootstrap-icons/font/bootstrap-icons.css"加到angular.json的styles数组，不是styleUrls，也不是组件 TS 里的import - 所有框架都要检查浏览器开发者工具 Elements 面板：图标元素是否存在？class 是否拼对？computed 样式里有没有
font-family: "bootstrap-icons"？没有就说明 CSS 没加载成功
想换大小/旋转/动画？别动 font-size，用 SVG 原生属性
虽然图标是字体形式，但实际渲染靠伪元素 + SVG symbol，所以传统字体缩放有局限。比如设 font-size: 4rem 可能导致图标边缘模糊，或与文字基线对不齐。
更可控的方式是用 Bootstrap Icons 自带的尺寸类，或直接操作 SVG 属性：
- 尺寸类：
bi-lg（1.25em）、bi-2x（2em）、bi-3x（3em）—— 这些是预设，比手动写font-size更稳定 - 旋转/翻转：用
bi-rotate-90、bi-flip-h等工具类，它们基于transform，不影响布局流 - 自定义动画：给图标加 class，比如
bi-spin已内置旋转动画；自己写的话，优先用width/height+transition，而不是依赖font-size动画
真正容易被忽略的是：所有这些类都依赖 bootstrap-icons.css 里定义的 @font-face 和基础 icon 规则，少引一次 CSS，整个图标系统就塌一半。
