Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库
Bootstrap 官方图标库
包含 1800 多个图标的免费、高质量的开源图标库。你可以以任何方式使用它们，例如 SVG 矢量图、SVG sprite 或 web 字体形式。不管你是否使用 Bootstrap ，都可以使用本图标库。
图标列表：https://icons.bootcss.com/
安装
Bootstrap 图标库 已被发布到了 npm，但是仍然可以手动下载并安装。
通过软件包管理工具来安装
通过 npm 或 Composer 来安装 Bootstrap 图标库，其中包括 SVG 格式的图标、sprite 图标和图标字体。然后，请参考 使用指南 来选择并使用你所需要的图标。
npm i bootstrap-icons
composer require twbs/bootstrap-icons
下载安装包
GitHub 上有所有已发布的版本，并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。
通过公共 CDN 加载
利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <head> 标签内（或通过 CSS 的 @import 指令加载）就能立即使用 Bootstrap 图标库了。 参见图标字体相关文档 以查看示例用法。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.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>
Sprite
利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像 <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> 元素引入 SVG 图标。
Bootstrap
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">
图标字体
Bootstrap 图标库还提供了图标字体文件，并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件，然后根据需要为 HTML 标签添加对应的 class 名称即可（例如 <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" 属性。否则，请提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片，或者作为按钮等类似组件上的唯一内容），有多种使用方式。以下是几个示例：
Bootstrap
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<i class="bi-github" role="img" aria-label="GitHub"></i>
<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 浏览器钟 SVG 可以获取焦点。 在嵌入 SVG 时，请为 <svg> 元素添加 focusable="false" 属性。 在 Stack Overflow 上有详细解释。
当 SVG 与 <img> 元素一起使用时，屏幕阅读器可能不会将它们视为图片来处理，也可能会完全跳过这类图片。 为 <img> 元素设置 role="img" 可以避免此类问题。 详情请见此篇文章
引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。 请根据需要使用 svg4everybody polyfill。
安装
Bootstrap 图标库 已被发布到了 npm，但是仍然可以手动下载并安装。
通过软件包管理工具来安装
通过 npm 或 Composer 来安装 Bootstrap 图标库，其中包括 SVG 格式的图标、sprite 图标和图标字体。然后，请参考 使用指南 来选择并使用你所需要的图标。
npm i bootstrap-icons
composer require twbs/bootstrap-icons
下载安装包
GitHub 上有所有已发布的版本，并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。
通过公共 CDN 加载
利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <head> 标签内（或通过 CSS 的 @import 指令加载）就能立即使用 Bootstrap 图标库了。 参见图标字体相关文档 以查看示例用法。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.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>
Sprite
利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像 <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> 元素引入 SVG 图标。
Bootstrap
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">
图标字体
Bootstrap 图标库还提供了图标字体文件，并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件，然后根据需要为 HTML 标签添加对应的 class 名称即可（例如 <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" 属性。否则，请提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片，或者作为按钮等类似组件上的唯一内容），有多种使用方式。以下是几个示例：
Bootstrap
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<i class="bi-github" role="img" aria-label="GitHub"></i>
<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 浏览器钟 SVG 可以获取焦点。 在嵌入 SVG 时，请为 <svg> 元素添加 focusable="false" 属性。 在 Stack Overflow 上有详细解释。
当 SVG 与 <img> 元素一起使用时，屏幕阅读器可能不会将它们视为图片来处理，也可能会完全跳过这类图片。 为 <img> 元素设置 role="img" 可以避免此类问题。 详情请见此篇文章
引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。 请根据需要使用 svg4everybody polyfill。
参考
