图标列表

安装

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

通过 npm 安装

利用如下 npm 命令安装 Bootstrap 图标库。

npm install bootstrap-icons

下载安装包

所有已发布的 版本 都保存在 GitHub 上。所有 SVG 格式的图标都包含在安装包内,其中也包括许可证和 readme 文件。package.json 文件也被包含在内,不过这些 npm 脚本主要用于我们的开发流程。

Download latest ZIP

用法

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">

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 9-11 和 Edge 12 中无法正常使用。 请根据需要使用 svg4everybody polyfill。

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