使用

一、嵌入式

嵌入式无需引入CSS。

  1. 将图标嵌入页面的 HTML 中（而不是外部图像文件）。这里我们使用了自定义的宽度和高度。
<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>

二、字体图标

  1. 引入CDN Css文件，或本地样式文件。 CDN1:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
CDN2备用: 
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  1. Bootstrap Icons 还包含带有每个图标类的图标字体。通过 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>

三、图片嵌入

将 Bootstrap Icons SVG 复制到您选择的目录，并使用 <img> 元素像普通图像一样引用它们。

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

四、雪碧图

使用 SVG 雪碧图通过 <use> 元素插入任何图标。使用图标的文件名作为片段标识符（例如，toggles 是#toggles）。 SVG 精灵允许您引用类似于 <img> 元素的外部文件，但具有 currentColor 的强大功能，可以轻松设置主题。

小心！ Chrome 存在一个问题，<use> 无法跨域使用 <use> doesn’t work across domains。

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

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

下载

Download latest ZIP