Skip to main content
Bootstrap 图标
v1.11.0 新功能: 100个新图标!

Bootstrap 图标

免费、高质量、开源的图标库,包含超过2,000个图标。以您喜欢的方式包含它们——SVG、SVG精灵图或网络字体。在任何项目中与Bootstrap一起使用或单独使用。

npm i bootstrap-icons
在 Figma 中打开

当前版本 v1.13.1 图标 图标精灵图 安装 使用方法 样式 可访问性 GitHub 仓库

Icons

安装

Bootstrap 图标已发布到 npm,但如果需要,也可以手动下载。

包管理器

使用 npm 或 Composer 安装 Bootstrap 图标——包括 SVG、图标精灵图和图标字体。然后,选择如何使用 使用说明 中包含图标。

npm i bootstrap-icons
composer require twbs/bootstrap-icons

下载

版本在 GitHub 上发布,包括图标 SVG、字体、许可证和说明文档。我们的 package.json 也包含在内,不过我们的 npm 脚本主要用于我们的开发工作流程。

下载最新 ZIP

CDN

从 jsDelivr 包含图标字体样式表——在您网站的 <head> 中或通过 CSS 中的 @import——几秒钟内即可开始使用。查看 图标字体文档 获取示例。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

使用方法

Bootstrap 图标是 SVG,因此您可以通过几种方式将它们包含到 HTML 中,具体取决于您的项目设置。我们建议使用 width: 1em(可选 height: 1em)以便通过 font-size 轻松调整大小。

内嵌

将图标嵌入到页面的 HTML 中(而不是外部图像文件)。这里我们使用了自定义的 widthheight

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>

精灵图

使用 SVG 精灵图通过 <use> 元素插入任何图标。使用图标的文件名作为片段标识符(例如,toggles#toggles)。SVG 精灵图允许您引用外部文件,类似于 <img> 元素,但具有 currentColor 的强大功能,便于主题化。

注意! Chrome 有一个问题,<use> 在跨域时不起作用

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

外部图像

将 Bootstrap 图标 SVG 复制到您选择的目录,并使用 <img> 元素像普通图像一样引用它们。

Bootstrap
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">

图标字体

Bootstrap 图标还包含每个图标的图标字体类。通过 CSS 在页面中包含图标网络字体,然后在 HTML 中根据需要引用类名(例如,<i class="bi bi-alarm"></i>)。

使用 font-sizecolor 来更改图标外观。

<i class="bi bi-alarm"></i>
<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

Sass

在 Sass 项目中使用 Bootstrap 时,您可能需要调整 $bootstrap-icons-font-dir 变量以指向文件安装的位置(最常见的是 node_modules,假设您使用 npm)。

注意! 这对于 ViteParcel 目前是必需的,因为它们的 Sass 编译器对相对 URL 不满意。

// 更新导入目录以指向 node_modules 中的位置
$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";

// 像往常一样导入 Sass 文件
@import "bootstrap-icons/font/bootstrap-icons";

CSS

您也可以在 CSS 中使用 SVG(确保转义任何字符,例如在指定十六进制颜色值时将 # 转换为 %23)。当 <svg> 上没有通过 widthheight 指定尺寸时,图标将填充可用空间。

如果您希望使用 background-size 调整图标大小,则需要 viewBox 属性。请注意,xmlns 属性是必需的。

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

样式

可以通过设置 .text-* 类或自定义 CSS 来更改颜色:

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

可访问性

对于纯装饰性图标,添加 aria-hidden="true"。否则,提供适当的文本替代方案。根据您用于添加图标的方法以及使用它们的位置(例如,作为独立图像,或作为按钮或类似控件的唯一内容),有各种可能的方法。以下是一些示例:

Bootstrap
<!-- <img> 元素上的 alt="..." -->
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>
<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>
<!-- 控件上的 aria-label="..." -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

使用 SVG 工作

SVG 非常棒,但它们确实有一些已知的怪癖需要解决。考虑到 SVG 可以使用的多种方式,我们没有在代码中包含这些属性和解决方法。

已知问题包括:

  • SVG 在 Internet Explorer 和 Edge Legacy 中默认接收焦点。 嵌入 SVG 时,在 <svg> 元素上添加 focusable="false"在 Stack Overflow 上了解更多。

  • 当使用带有 <img> 元素的 SVG 时,屏幕阅读器可能不会将它们宣布为图像,或者完全跳过图像。<img> 元素上包含额外的 role="img" 以避免任何问题。查看本文了解详情。

  • 外部 SVG 精灵图在 Internet Explorer 中可能无法正常工作。 根据需要安装 svg4everybody polyfill。

发现了我们应该注意的另一个 SVG 问题?请打开 一个问题 来分享详细信息。