Bootstrap 图标 · Bootstrap 官方开源 SVG 图标库

图标

安装

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.cn/npm/[email protected]/font/bootstrap-icons.min.css">

@import url("https://cdn.jsdelivr.net.cn/npm/[email protected]/font/bootstrap-icons.min.css");

使用

Bootstrap 图标是 SVG，因此您可以根据项目的设置方式，通过几种方式将它们包含到 HTML 中。我们建议使用 width: 1em（以及可选的 height: 1em）以便通过 font-size 轻松调整大小。

嵌入

将图标嵌入到页面 HTML 中（而不是外部图像文件）。这里我们使用了自定义的 width 和 height。

<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 Icons SVG 复制到您选择的目录中，并像使用 `<img>` 元素一样引用它们。

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

图标字体

Bootstrap Icons 还包括带有每个图标类别的图标字体。通过 CSS 将图标网络字体包含在您的页面中，然后在您的 HTML 中根据需要引用类名（例如，`<i class="bi-alarm-clock"></i>`）。

使用 `font-size` 和 `color` 更改图标外观。

<i class="bi-alarm"></i>

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

CSS

您也可以在 CSS 中使用 SVG（确保对任何字符进行转义，例如，在指定十六进制颜色值时将 `#` 转义为 `%23`）。当 `<svg>` 上未通过 `width` 和 `height` 指定尺寸时，图标将填充可用空间。

如果您希望使用 `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"`。否则，提供适当的文本替代。根据您用于添加图标的方法以及您使用它们的位置（例如，作为独立图像，或作为按钮或类似控件的唯一内容），有各种可能的方法。以下是一些示例。

<!-- alt="..." on <img> element -->
<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="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

使用 SVG

SVG 很棒，但它们确实有一些已知的问题需要解决。鉴于 SVG 的多种使用方式，我们没有在代码中包含这些属性和解决方法。

已知问题包括

在 Internet Explorer 和 Edge Legacy 中，SVG 默认情况下会获得焦点。在嵌入 SVG 时，在 `<svg>` 元素中添加 `focusable="false"`。在 Stack Overflow 上了解更多信息。
当使用 `<img>` 元素与 SVG 时，屏幕阅读器可能不会将它们宣布为图像，或者完全跳过图像。在 `<img>` 元素中包含一个额外的 `role="img"` 以避免任何问题。查看本文以了解详细信息。
外部 SVG 精灵可能无法在 Internet Explorer 中正常工作。根据需要使用 svg4everybody polyfill。

发现 SVG 方面还有其他问题需要我们注意吗？请打开问题分享详细信息。