Bootstrap 图标库（bootstrap-icons）应用方法

概述

Bootstrap 图标库拥有 1600 多个图标的免费、高质量的开源图标库。你可以以任何方式使用它们，例如 SVG 矢量图、SVG sprite 或 web 字体形式。并不局限于使用 Bootstrap 前端框架的项目。

官网

https://icons.bootcss.com/

配置

以下为推荐的方法，在 Bootstrap Icons 的官网还可以查看更多配置的方法。

以下以  图标为例演示。

1.WEB 字体形式

CSS 字体图标文件应用

• HTML 头部 CDN 加载

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

• CSS 引用 CDN 加载

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

以上 HMTL 或 CSS 加载方式任选一种即可。

icon 图标字体内容显示

• 在 HTML 需要显示图标的相应位置增加以下代码即可。

<i class="bi-info-circle"></i>

2.SVG 矢量图

SVG 矢量图文件应用

只需要在 HTML 文档内嵌入以下 svg 代码即可实现图标展示。

建议设置 width: 1em（以及可选的 height: 1em），便于后期通过 font-size 属性重置图标的大小，同时支持 width="" height="" 来重设。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" 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="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>

SVG 更多可选项样式

正常显示颜色

.className svg {
    fill: #6395f9;
}

鼠标悬停样式

svg:hover path{
  fill: #ff6868;
}