图标库 - Bootstrap框架

Icons

安装

Bootstrap 图标已发布到npm，但也可以根据需要手动下载。

npm

通过命令行使用npm安装Bootstrap图标。

npm i bootstrap-icons

下载

所有发行版均在GitHub上发布,并包括图标SVG，许可证和自述文件。我们package.json也包括在内，但我们的NPM脚本主要是适用于我们的开发工作流程。

下载最新 ZIP

用法

Bootstrap 图标是SVG，因此您可以通过几种方式将它们包含到HTML中，具体取决于项目的设置方式。Bootstrap图标默认包含1em的width 和 height，以便轻松调整 font-size.

嵌入式的

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

<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> 元素中插入任何图标。使用图标的文件名作为片段标识符（例如toggles is #toggles）。SVG Sprite允许您引用类似于<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>元素的普通图像一样引用它们。

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

图标字体

Bootstrap图标还包括带有每个图标类的图标字体。通过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: "";
  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的多种使用方式，我们的代码中没有包含这些属性和解决方法。

已知问题包括：

Focus handling is broken in Internet Explorer and Edge Legacy. When embedding your SVGs, add focusable="false" to the <svg> element. Learn more on Stack Overflow.
Browsers inconsistently announce SVGs as <img> tags with voice assistance. Include role="img" when possible to avoid any issues. See this article for details.
Safari skips aria-label when used non-focusable SVGs. As such, use aria-hidden="true" when embedding the <svg> file and use CSS to visually hide an equivalent label. More details here.
External SVG sprites may not function correctly in Internet Explorer. Use the svg4everybody polyfill as needed.

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

Bootstrap 图标库