SVG是Bootstrap 5默认且唯一推荐的图标方案，彻底移除图标字体支持；因其矢量清晰、语义明确、加载可控、对齐可靠，优于字体图标。
SVG图标在Bootstrap 5中是默认且唯一推荐方案
bootstrap 5彻底移除了对图标字体（icon font）的支持，bootstrap-icons库只提供svg组件、独立svg文件和css类三种用法，没有字体文件（如 bootstrap-icons.woff2）。这不是“可选”，而是框架层面的取舍——图标字体在v5中已不存在于源码和发布包中。
为什么SVG比图标字体更可靠
图标字体本质是把图标当文字渲染，依赖字体加载、文本换行逻辑和基线对齐规则，导致大量隐性问题：
-
vertical-align错位：图片<img>默认baseline，而字体图标靠伪元素模拟，实际对齐基准不一致，必须手动设vertical-align: -.125em才能对齐文本行高 - 缩放失真：字体图标在高DPI屏或放大页面时出现锯齿、模糊，SVG原生矢量无此问题
- 语义缺失：屏幕阅读器无法识别字体图标的含义，SVG可通过
aria-label或<title></title>显式声明 - 加载阻塞：字体文件需额外HTTP请求，且可能触发FOIT（Flash of Invisible Text），SVG内联或按需加载更可控
怎么在项目里正确引入Bootstrap SVG图标
最稳妥的方式是使用官方提供的React/Vue/Angular组件，或直接复制SVG代码；不建议用CSS类方式（如 bi bi-heart）配合字体回退——它在Bootstrap 5中已失效。
- 推荐做法：从
node_modules/bootstrap-icons/icons/直接引用单个SVG文件，例如import HeartIcon from 'bootstrap-icons/icons/heart.svg'; - 若用CDN：加载
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css仅提供CSS类名支持，但这些类名底层仍是SVG<svg></svg>+<use></use>，不是字体 - 避坑点：不要尝试把
.woff2文件手动加回项目——Bootstrap 5的CSS根本不定义@font-face，加了也无效
SVG图标在响应式布局中容易出错的两个地方
一是父容器没设 position: relative，导致叠加文本用 position: absolute 后定位错乱；二是未限制SVG宽高，造成移动端溢出或拉伸变形。
- 确保SVG容器有
position: relative，否则top: 50%; left: 50%; transform: translate(-50%, -50%)会相对于视口定位 - 给SVG加
width和height（哪怕用1em或1rem），避免浏览器按原始16×16像素渲染后被拉伸 - 慎用
img-fluid：它对SVG效果不稳定，更适合位图；SVG优先用CSS控制尺寸，比如max-width: 100%; height: auto;
bi-heart 对应的字体Unicode码——那套逻辑在Bootstrap 5里已经失效了。
