Bootstrap Icons 完全指南：从入门到高级使用技巧
2026-07-01 ·
Bootstrap Icons 是 Bootstrap 官方推出的 SVG 图标库，目前包含 2000+ 高质量图标。本文将全面介绍如何在不同场景下高效使用这些图标。
1. 基本引入方式
Bootstrap Icons 支持两种引入方式：字体图标和 SVG 内联。推荐使用字体图标方式，使用更简便。
<!-- 通过 CDN 引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- 使用图标 -->
<i class="bi-house"></i>
<i class="bi-gear-fill"></i>2. 尺寸控制
图标尺寸通过字体大小控制，可以使用 Bootstrap 的排版工具类快速调整：
<i class="bi-bootstrap fs-1"></i> <!-- 2.5rem -->
<i class="bi-bootstrap fs-3"></i> <!-- 1.75rem -->
<i class="bi-bootstrap fs-6"></i> <!-- 1rem -->
<i class="bi-bootstrap" style="font-size:3rem"></i> <!-- 自定义 -->
3. 颜色与样式
图标的颜色和样式可以像普通文本一样通过 CSS 控制：
<i class="bi-heart-fill text-danger fs-3"></i> <!-- 红色填充心 -->
<i class="bi-star-fill text-warning fs-3"></i> <!-- 黄色星级 -->
<i class="bi-check-circle text-success fs-3"></i> <!-- 绿色勾选 -->
4. SVG 内联方式
需要更精细控制时可使用 SVG 内联方式，直接从 Bootstrap Icons 官网复制 SVG 代码：
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="/static/img/bootstrap-icons.svg#house"/>
</svg>
5. 常用组合模式
<!-- 按钮图标 -->
<button class="btn btn-primary"><i class="bi-plus-lg me-1"></i>添加用户</button>
<!-- 列表图标 -->
<ul class="list-unstyled">
<li><i class="bi-check2 text-success me-2"></i>已完成项</li>
</ul>
<!-- 提醒图标 -->
<div class="alert alert-warning d-flex align-items-center gap-2">
<i class="bi-exclamation-triangle-fill fs-4"></i>
<div>请检查您的输入</div>
</div>