dowebok

图标列表

安装

Bootstrap 图标库已经发布到 npm，可以通过 npm 安装，也可以手动下载安装。

通过 npm 安装

npm install bootstrap-icons

下载安装包

在 GitHub 上可以下载到图标，包含了所有的 SVG 图标。

用法

Bootstrap 图标库的图标都是 SVG 格式的，因此你可以通过以下几种方式将他们应用到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。

内嵌

将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。

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

作为外部图像文件引用

将 Bootstrap 图标库的 SVG 文件复制到你所选择的目录中，并像引用普通图像一样使用 <img> 元素引入 SVG 图标。

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

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>