Icons 图标

icons图标库是使用开源的Bootstrap 图标库拥有近 1300 个图标的免费、高质量的开源图标库。你可以以任何方式使用它们，例如 SVG 矢量图、SVG sprite或 web 字体形式。

图标列表

安装

通过 npm 安装

npm i bootstrap-icons

下载安装包

下载最新版本的 ZIP 压缩包

通过公共 CDN 加载

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css");

用法

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

内嵌

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

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 图标。

<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 样式属性可以更改图标的外观。

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>

可访问性

如果图标不是纯装饰性的，请确保提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片或作为按钮等空间的唯一内容），有多种使用方式。以下是几个示例：

示例一:

<!-- 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" ...>
  ...
  </svg>
</button>

‌
‌
‌
‌

Icons 图标

图标列表

安装

通过 npm 安装

npm i bootstrap-icons

下载安装包

下载最新版本的 ZIP 压缩包

通过公共 CDN 加载

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css");

用法

内嵌

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

Sprite

注意！在 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 图标。

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

图标字体

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

CSS

如果需要使用 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>

可访问性

示例一:

<!-- 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" ...>
  ...
  </svg>
</button>

OutUI

OutUI

Icons 图标

图标列表

安装

通过 npm 安装

下载安装包

通过公共 CDN 加载

用法

内嵌

Sprite

作为外部图片文件引用

图标字体

CSS

设置样式

可访问性

Icons 图标

图标列表

安装

通过 npm 安装

下载安装包

通过公共 CDN 加载

用法

内嵌

Sprite

作为外部图片文件引用

图标字体

CSS

设置样式

可访问性