English 中文 العربية 日本語 Português

Bootstrap: Icons 图标

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Charlie 的产品管理页面需要在按钮和导航中添加图标来提升可读性——编辑按钮加铅笔图标、删除按钮加垃圾桶图标、导航栏加搜索图标——用 Bootstrap Icons 几行代码即可实现。

(4) 解法

图标是界面中的重要视觉元素。Bootstrap Icons 是 Bootstrap 官方出品的开源 SVG 图标库，包含 2000+ 图标，与 Bootstrap 组件完美配合。

理解方式： Bootstrap Icons = SVG 图标库——体积小、无限缩放、颜色可继承 CSS。你用 <i> 或 <svg> 标签引入，用 Bootstrap 工具类控制尺寸和颜色。

(5) 收益

用 Bootstrap Icons 几行代码即可实现图标添加，所有图标与 Bootstrap 组件无缝配合，颜色和尺寸统一可控，界面可读性大幅提升。

2. 引入 Bootstrap Icons

▶ 示例：基本图标演示

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Icons Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Icons</h5>
    <i class="bi bi-house"></i> Home
    <i class="bi bi-gear"></i> Settings
    <i class="bi bi-person"></i> Profile
    <i class="bi bi-envelope"></i> Messages
    <i class="bi bi-bell"></i> Notifications

    <hr>

    <h5>Icons with Colors</h5>
    <i class="bi bi-heart-fill text-danger fs-3"></i>
    <i class="bi bi-star-fill text-warning fs-3"></i>
    <i class="bi bi-check-circle-fill text-success fs-3"></i>
    <i class="bi bi-info-circle-fill text-primary fs-3"></i>

    <hr>

    <h5>Icons in Buttons</h5>
    <button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
    <button class="btn btn-success"><i class="bi bi-pencil"></i> Edit</button>
    <button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
    <button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>

    <hr>

    <h5>Icon Sizes</h5>
    <i class="bi bi-circle fs-6"></i> fs-6
    <i class="bi bi-circle fs-4"></i> fs-4
    <i class="bi bi-circle fs-2"></i> fs-2
    <i class="bi bi-circle fs-1"></i> fs-1
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 Icon CDN link: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css

(1) 基本 Class

HTML 
<i class="bi bi-{name}"></i>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 图标名采用 bi- 前缀 + 图标英文名称。全部图标列表可查看 Bootstrap Icons 官方目录。

图标写法 渲染效果 说明
<i class="bi bi-alarm"></i> 🔔 闹钟图标
<i class="bi bi-calendar"></i> 📅 日历图标
<i class="bi bi-camera"></i> 📷 相机图标
<i class="bi bi-heart-fill"></i> ❤️ 实心心形（-fill 填充版）
<i class="bi bi-star"></i> ⭐ 空心星星（轮廓版）

fill 后缀： 大部分图标提供 -fill 填充版本。bi-heart 是轮廓，bi-heart-fill 是实心。

(2) 常用图标分类

分类 图标 场景
导航 bi-house / bi-gear / bi-person 导航菜单
操作 bi-plus / bi-pencil / bi-trash / bi-download 按钮
状态 bi-check-circle / bi-exclamation-triangle / bi-info-circle 反馈
社交 bi-twitter-x / bi-github / bi-linkedin 社交链接
箭头 bi-chevron-right / bi-arrow-left / bi-caret-down 导航/轮播
媒体 bi-play-fill / bi-pause-fill / bi-volume-up 播放器

3. 图标使用方式

▶ 示例：社交媒体图标链接

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Media Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Social Media Links</h5>
    <div class="d-flex gap-3 fs-3">
      <a href="#" class="text-primary"><i class="bi bi-facebook"></i></a>
      <a href="#" class="text-info"><i class="bi bi-twitter-x"></i></a>
      <a href="#" class="text-danger"><i class="bi bi-instagram"></i></a>
      <a href="#" class="text-success"><i class="bi bi-whatsapp"></i></a>
      <a href="#" class="text-secondary"><i class="bi bi-github"></i></a>
      <a href="#" class="text-primary"><i class="bi bi-linkedin"></i></a>
      <a href="#" class="text-danger"><i class="bi bi-youtube"></i></a>
    </div>

    <hr>

    <h5>With Labels</h5>
    <div class="d-flex gap-4">
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-facebook d-block fs-2 text-primary"></i>
        <small>Facebook</small>
      </a>
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-twitter-x d-block fs-2 text-dark"></i>
        <small>Twitter</small>
      </a>
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-instagram d-block fs-2 text-danger"></i>
        <small>Instagram</small>
      </a>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：图标与按钮组合

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Button Combinations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Button with Icon Left</h5>
    <button class="btn btn-primary"><i class="bi bi-download me-1"></i> Download</button>
    <button class="btn btn-success"><i class="bi bi-check-lg me-1"></i> Save</button>
    <button class="btn btn-danger"><i class="bi bi-trash me-1"></i> Delete</button>

    <h5 class="mt-3">Icon Only Button</h5>
    <button class="btn btn-outline-primary" aria-label="Search"><i class="bi bi-search"></i></button>
    <button class="btn btn-outline-secondary" aria-label="Notifications"><i class="bi bi-bell"></i></button>
    <button class="btn btn-outline-info" aria-label="Settings"><i class="bi bi-gear"></i></button>

    <h5 class="mt-3">Button Group with Icons</h5>
    <div class="btn-group" role="group">
      <button class="btn btn-outline-primary"><i class="bi bi-justify-left"></i></button>
      <button class="btn btn-outline-primary"><i class="bi bi-justify"></i></button>
      <button class="btn btn-outline-primary"><i class="bi bi-justify-right"></i></button>
    </div>

    <h5 class="mt-3">Icon + Badge Button</h5>
    <button class="btn btn-primary position-relative">
      <i class="bi bi-cart"></i> Cart
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
    </button>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

4. 图标尺寸控制

▶ 示例：自定义颜色图标列表

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Color Icon List</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    .icon-list { list-style: none; padding: 0; }
    .icon-list li { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
    .icon-list .bi { font-size: 1.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h5>Feature List with Custom Colors</h5>
    <ul class="icon-list">
      <li><i class="bi bi-shield-check text-success"></i> <span><strong>Security</strong> — 256-bit encryption</span></li>
      <li><i class="bi bi-lightning-charge text-warning"></i> <span><strong>Speed</strong> — CDN optimized delivery</span></li>
      <li><i class="bi bi-cloud-check text-info"></i> <span><strong>Backup</strong> — Automatic daily backup</span></li>
      <li><i class="bi bi-headset text-primary"></i> <span><strong>Support</strong> — 24/7 customer service</span></li>
      <li><i class="bi bi-graph-up-arrow text-danger"></i> <span><strong>Analytics</strong> — Real-time dashboard</span></li>
    </ul>

    <hr>

    <h5>Gradient Icons (Custom CSS)</h5>
    <div class="d-flex gap-3 fs-1">
      <i class="bi bi-heart-fill" style="color: #ff6b6b;"></i>
      <i class="bi bi-star-fill" style="color: #feca57;"></i>
      <i class="bi bi-moon-fill" style="color: #48dbfb;"></i>
      <i class="bi bi-sun-fill" style="color: #ff9ff3;"></i>
      <i class="bi bi-flower1" style="color: #54a0ff;"></i>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class CSS 值 实际大小 适用场景
fs-6 font-size: 1rem 16px 行内文本图标
fs-5 font-size: 1.25rem 20px 列表项图标
fs-4 font-size: 1.5rem 24px 按钮图标
fs-3 font-size: 1.75rem 28px 导航栏图标
fs-2 font-size: 2rem 32px 卡片标题图标
fs-1 font-size: 2.5rem 40px Hero/大图标
自定义 style="font-size: 3rem" 48px+ 特殊强调场景

(1) 图标与文本组合模式

模式 结构 示例
图标在前 <i class="bi bi-* me-2"></i>文本 <i class="bi bi-house me-2"></i>首页
图标在后 文本<i class="bi bi-* ms-2"></i> 更多<i class="bi bi-arrow-right ms-2"></i>
图标在上 <i class="bi bi-* d-block"></i><span>文本</span> 社交媒体图标
图标替换文本 <button aria-label="搜索"><i class="bi bi-search"></i></button> 纯图标按钮
图标 + 徽章 <i class="bi bi-* position-relative"><span class="badge">N</span></i> 通知计数

5. 图标在组件中的应用

HTML 
<!-- 按钮中的图标 -->
<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> 新增</button>
<button class="btn btn-danger"><i class="bi bi-trash"></i> 删除</button>
<button class="btn btn-outline-secondary"><i class="bi bi-search"></i> 搜索</button>

<!-- 导航栏中的图标 -->
<nav class="nav">
  <a class="nav-link" href="#"><i class="bi bi-house me-1"></i>首页</a>
  <a class="nav-link" href="#"><i class="bi bi-box me-1"></i>产品</a>
  <a class="nav-link" href="#"><i class="bi bi-envelope me-1"></i>消息</a>
</nav>

<!-- 警告框中的图标 -->
<div class="alert alert-success d-flex align-items-center">
  <i class="bi bi-check-circle-fill me-2"></i>
  操作成功完成
</div>

<div class="alert alert-danger d-flex align-items-center">
  <i class="bi bi-exclamation-triangle-fill me-2"></i>
  出现错误，请重试
</div>

<!-- 卡片中的图标 -->
<div class="card text-center p-4">
  <i class="bi bi-cloud-upload fs-1 text-primary"></i>
  <h5 class="mt-2">上传文件</h5>
  <p class="text-body-secondary">拖拽文件到此处</p>
</div>

<!-- 列表组中的图标 -->
<ul class="list-group">
  <li class="list-group-item"><i class="bi bi-house me-2"></i>仪表盘</li>
  <li class="list-group-item"><i class="bi bi-box me-2"></i>产品</li>
  <li class="list-group-item"><i class="bi bi-people me-2"></i>用户</li>
  <li class="list-group-item"><i class="bi bi-graph-up me-2"></i>报表</li>
</ul>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

6. SVG 方式

Bootstrap Icons 除了通过 CSS class 使用，还可以直接使用 SVG <use> 标签引用 sprite 文件。

HTML 
<!-- Class 方式 -->
<i class="bi bi-house"></i>

<!-- SVG 方式 -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#house"/>
</svg>

<!-- SVG + 自定义颜色 -->
<svg class="bi text-success" width="32" height="32" fill="currentColor">
  <use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#check-circle"/>
</svg>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

对比项 Class 方式（<i>） SVG 方式（<svg>）
语法 <i class="bi bi-*"></i> <svg><use href="...#name"/></svg>
加载方式 CDN CSS 文件 远程 sprite SVG 文件
多色支持 单色（继承 currentColor） 支持多色 SVG
尺寸控制 fs-* 工具类 width/height 属性
颜色控制 text-* 工具类 fill 属性或 text-*
适用场景 快速集成、标准场景 需要自定义样式的场景

7. 高级图标应用

▶ 示例：CSS 动画图标

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    .icon-spin { animation: spin 2s linear infinite; display: inline-block; }
    .icon-pulse { animation: pulse 1.5s ease-in-out infinite; display: inline-block; }
    .icon-shake { animation: shake 0.5s ease-in-out infinite; display: inline-block; }
    .icon-bounce { animation: bounce 1s ease-in-out infinite; display: inline-block; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h5>Animated Icons</h5>
    <div class="d-flex gap-4 fs-1 mb-4">
      <div class="text-center">
        <i class="bi bi-arrow-clockwise icon-spin text-primary"></i>
        <div><small>Spin</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-bell-fill icon-shake text-warning"></i>
        <div><small>Shake</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-heart-fill icon-pulse text-danger"></i>
        <div><small>Pulse</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-chevron-down icon-bounce text-success"></i>
        <div><small>Bounce</small></div>
      </div>
    </div>

    <h5>Loading Spinner</h5>
    <div class="d-flex align-items-center gap-3">
      <i class="bi bi-arrow-clockwise icon-spin fs-3 text-primary"></i>
      <span>Loading...</span>
    </div>

    <h5 class="mt-3">Notification Bell</h5>
    <button class="btn btn-outline-warning"
      onmouseover="this.querySelector('i').classList.add('icon-shake')"
      onmouseout="this.querySelector('i').classList.remove('icon-shake')">
      <i class="bi bi-bell-fill"></i> Notifications
    </button>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

100% 
flowchart TD
    A[需要图标] --> B{使用场景}
    B --> C[导航/按钮/列表]
    B --> D[社交媒体链接]
    B --> E[加载/动画效果]
    C --> F{数量}
    F --> G[少量 < 10]
    F --> H[大量 ≥ 10]
    G --> I[内联 SVG 或 class]
    H --> J[CDN 引入 CSS]
    D --> K[带颜色 class + 链接]
    E --> L[CSS keyframes 动画]
    I --> M[使用 bi-* class]
    J --> M
    M --> N[配合 fs-* / text-* 控制样式]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

场景 推荐方式 说明
按钮图标 <i class="bi bi-*"></i> 用 me-1/ms-1 控制间距
纯图标按钮 <button aria-label="..."><i ...></i></button> 必须加 aria-label
导航链接 <a><i class="bi bi-* me-1"></i>文本</a> 图标+文字组合
通知徽章 <span class="position-relative"><i ...></i><span class="badge">N</span></span> 定位徽章在右上角
加载动画 <i class="bi bi-arrow-clockwise" style="animation: spin 2s linear infinite"></i> 配合 CSS 动画
对比项 Bootstrap Icons Font Awesome
格式 SVG 图标（非字体） 字体图标
图标数量 2000+ 7800+（Pro）
价格 免费开源 免费版有限，Pro 付费
前缀 bi bi-* fas fa-* / far fa-*
与 Bootstrap 集成 官方出品，完美配合 需额外配置
多色支持 单色（可 SVG 多色） 单色（字体限制）
文件大小 ~120KB（CSS） ~300KB+（全套）

❓ 常见问题

Q Bootstrap Icons 和 Font Awesome 怎么选？
A Bootstrap 项目首选 Bootstrap Icons——官方出品、无缝集成、体积更小。如果已经使用 Font Awesome 或有特殊图标需求（如品牌图标更多），可以继续用 Font Awesome 但注意前缀不同：bi bi-* vs fas fa-*。
Q 图标不显示怎么办？
A 三步排查：(1) 确认 CDN 链接正确且已加载 <link rel="stylesheet" href="...bootstrap-icons.min.css">；(2) 检查图标名是否正确——bi- 前缀+小写英文名+连字符连接；(3) 打开浏览器控制台查看 Network 标签确认 CDN 加载成功。
Q 可以只加载部分图标而不引入整个 CSS 文件吗？
A 可以。使用 SVG Sprite 方式：<use href="...bootstrap-icons.svg#name"/> 按需引用。也可以将单个 SVG 内联到 HTML 中。还可以用工具（如 iconfont 生成器）创建自定义子集。
Q Bootstrap Icons 和 Font Awesome 的 class 命名能混用吗？
A 语法上可以同时引入两个库，但注意前缀不同——Bootstrap Icons 用 bi bi-*，Font Awesome 用 fas fa-*。同时引入会增加加载体积，建议统一选一个。如果从 Font Awesome 迁移，可以用查找替换批量修改 class 名。
Q 仅用图标的按钮如何保证可访问性？
A 三种方案：(1) 用 <span class="visually-hidden">文字描述</span> 添加屏幕阅读器文本；(2) 在 <i> 上设置 aria-label="描述"；(3) 用 <a> 或 <button> 包裹并从 title 属性提供提示。推荐方案 (1) 兼容性最好。
Q 图标可以叠加或组合使用吗？
A 可以。利用 position-relative + position-absolute 实现图标叠加。例如在 bi-envelope 右上角放 bi-dot-fill 表示未读消息。也可以使用 CSS 的 mask 或 background 属性实现更复杂的组合效果。

📖 小节

📝 作业

  1. ⭐ 创建一个导航栏，在 5 个链接前各加一个图标：首页（house）、产品（box）、关于（info-circle）、博客（file-text）、联系（envelope）。
  2. ⭐⭐ 创建一个按钮组：搜索（search）、新增（plus-lg）、编辑（pencil）、删除（trash）、下载（download）——每个按钮带对应图标和文字。
  3. ⭐⭐⭐ 将一个之前的 Alert 示例改造为带图标版本：Success 用 bi-check-circle-fill，Danger 用 bi-exclamation-triangle-fill，Info 用 bi-info-circle-fill，并添加淡入动画效果。

上一课： 折叠面板 · 下一课： 辅助工具类

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏