图标列表

安装

Bootstrap 图标库 已被发布到了 npm,但是仍然可以手动下载并安装。

通过 npm 安装

通过 npm 安装 Bootstrap 图标库,包括 SVG 图标、sprite 图标和图标字体等。然后,请参考 用法指南 选择并使用你所需要的图标。

npm i bootstrap-icons

下载安装包

GitHub 上有所有已发布的版本,并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json 文件也被包含在内,不过这些 npm 脚本主要用于我们的开发流程。

下载最新版本的 ZIP 压缩包

通过公共 CDN 加载

利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <head> 标签内(或通过 CSS 的 @import 指令加载)就能立即使用 Bootstrap 图标库了。 参见图标字体相关文档 以查看示例用法。

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

用法

Bootstrap 图标库 的图标都是 SVG 格式的,因此你可以通过以下几种方式将他们应用到你的 HTML 中,具体使用哪种方式取决于你的项目是如何设置的。Bootstrap 图标库 默认将 widthheight 设置为 1em,便于你通过 font-size 属性重置图标的大小。

内嵌

将图标嵌入你的 HTML 页面中(与引用外部图像文件相反)。如下例子中我们对 widthheight 属性进行了重新设置。

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

Sprite

利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符(fragment identifier。例如 toggles 就是 #toggles)。SVG sprites 允许你引用类似 <img> 元素的外部文件,并支持 currentColor 的功能以便主题化。

<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> 元素引入 SVG 图标。

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

图标字体

Bootstrap 图标库还提供了图标字体文件,并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件,然后根据需要为 HTML 标签添加对应的 class 名称即可(例如 <i class="bi-alarm-clock"></i>)。

使用 font-sizecolor 样式属性可以更改图标的外观。

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

CSS

你还可以在 CSS 中使用 SVG 图标(当指定十六进制颜色值时 务必对某些字符进行转义,例如将 # 字符替换为 %23)。如果未指定 <svg> 元素的 widthheight 属性,则图标将填满所有可用空间。

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

.bi::before {
  display: inline-block;
  content: "";
  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-alert-triangle text-success" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>
使用 SVG SVG 是非常棒的技术,但是它们仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式,我们在代码中没有包含以下这些属性和处理手段。

已知问题包括:

  • Internet Explorer 和 旧版本的 Edge 浏览器对焦点的处理有问题。 在嵌入 SVG 时,请为 <svg> 元素添加 focusable="false" 属性。 在 Stack Overflow 上有详细解释。

  • 某些浏览器将 SVG 视为带有语音辅助的 <img> 标签。 尽可能添加 role="img" 属性以避免这些问题。 详见此文章

  • Safari 浏览器在使用非可聚焦(non-focusable)的 SVG 时会忽略 aria-label 属性。 因此,在嵌入 <svg> 文件时请设置 aria-hidden="true" 属性,并通过 CSS 在视觉上隐藏与之有相同功能的标签。 点击这里查看详情

  • 引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。 请根据需要使用 svg4everybody polyfill。

如果您发现了其他应该引起注意的问题,请向我们提交 issue 并详细说明。