Bootstrap Icons需单独引入CDN，推荐SVG内联写法；若用CSS类名（如bi-heart-fill），须确保bootstrap-icons.css正确加载、字体文件可访问且类名无拼写错误。
Bootstrap 图标（Bootstrap Icons）需要单独引入，它不包含在 Bootstrap CSS 或 JS 主库中。如果图标不显示，大概率是没正确加载图标字体或 SVG 资源，或者类名用错了。
确认引入的是官方 Bootstrap Icons CDN
不要混用旧版 Glyphicons 或其他图标库。Bootstrap 5+ 官方推荐使用独立的 Bootstrap Icons 库。推荐使用以下 CDN 链接（最新稳定版）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
注意版本号（如 1.11.3），建议去 官网 复制最新 CDN 地址，避免本地路径错误或版本过旧。
检查 HTML 中图标的写法是否符合规范
Bootstrap Icons 主要支持两种用法：SVG 内联 和 CSS 类（需配合 <i> 标签）。推荐优先用 SVG 方式，更稳定、可定制性强：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
✅ 推荐：SVG 写法（无需额外 JS，直接复制官网图标代码）
去 图标详情页 点 “Copy SVG”，粘贴到 HTML 中即可：<svg class="bi" width="24" height="24" fill="currentColor"><use xlink:href="bootstrap-icons.svg#heart-fill"/></svg>
（实际项目中建议把 SVG 内容内联或用<symbol>雪碧图优化） -
⚠️ CSS 类写法（需确保字体文件加载成功）
使用<i class="bi bi-heart-fill"></i>时，必须满足：- 已正确引入
bootstrap-icons.css - 浏览器能正常加载对应的 WOFF2 字体文件（检查 Network 面板是否有
bootstrap-icons.woff2404） - 元素有足够尺寸（默认图标 font-size 较小，可加
fs-5或自定义font-size: 1.5rem）
- 已正确引入
排查常见失效原因
-
CDN 被拦截或网络异常：打开浏览器开发者工具 → Network → 刷新页面 → 搜索
bootstrap-icons，确认 CSS 和字体文件状态码为 200 -
CSS 加载顺序问题：确保
bootstrap-icons.css在你自定义 CSS 之前引入，避免被font-family或content规则覆盖 -
类名拼写错误：Bootstrap Icons 类名统一以
bi-开头，例如bi-alarm、bi-bell-fill，不是glyphicon或fa-star；大小写敏感，且必须带bi前缀 -
未设置显示属性或内容为空：若用
<i>标签但没加bi-xxx类，或写了类但字体未加载，会显示为空白；可用color: red临时测试是否渲染了元素
快速验证是否生效的小技巧
在页面任意位置插入以下代码，刷新看是否显示红色心形图标：
<i class="bi bi-heart-fill" style="color: red; font-size: 2rem;"></i>
如果仍不显示：
- 右键 → 检查元素 → 查看该
<i>是否应用了bi相关样式（特别是font-family: 'bootstrap-icons'） - 点击 Styles 面板，看
font-family是否被覆盖，或是否有content伪元素值（如"\f24c"） - 尝试换一个图标（如
bi-star），排除单个图标名称变更可能
不复杂但容易忽略。核心就三点：引入对的 CDN、用对的类名、确保字体资源可访问。
