新的 Bootstrap 图标有可用的字体吗？

Question

来自 Font Awesome 我想在我的网络项目中使用新的 Bootstrap 图标。不幸的是，就我必须插入的代码量而言，包含 Bootstrap 图标似乎更加乏味。

我正在寻找什么：

以图标为例bi-chevron-right。有没有办法使用 Bootstrap Icons 作为字体？伪代码：

<i class="bi bi-chevron-right"></i>

这种方式有几个好处：

• 简单干净地包含图标。
• 由于项目的所有图标仅包含 1 个外部文件，因此加载时间更短。
• 放置实际图标库的位置更加灵活（考虑选项 b），如果您更改库的路径，则必须更新所有引用！）。
• 无需对实际图标大小进行硬编码，因为这可以通过纯 CSS 进行控制。

文档目前仅提供以下内容：

该文档当前提供了多种插入图标的方法。所有这些都包含一些需要编写的代码。

a) 直接嵌入SVG：

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

b) 或使用 SVG 精灵：

<svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="/path/to/bootstrap-icons.svg#chevron-right"/>
</svg>

c) 或链接外部图像：

<img src="/path/to/bootstrap-icons/chevron-right.svg" alt="" width="32" height="32" title="Bootstrap">

（不是说 CSS 变体，它与选项 a）基本相同，只是更乏味。）

或者我错过了什么？

Answer 1

还起作用的是：

npm install bootstrap@next

npm install bootstrap-icons

然后在你的 main.css 中

@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');

然后在 HTML 中

<i class="bi bi-alarm"></i>