4

来自 Font Awesome 我想在我的 web 项目中使用新的 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">

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

还是我错过了什么？

4

3 回答 3

4

同样有效的是：

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>
于 2021-02-06T20:05:56.277 回答
1

在 1.2 版中，现在包含 .woff 文件，您可以通过键入 "<i class = 'bi-alarm'> </i>"font-awesome 来使用它。

<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">

来源：https ://blog.getbootstrap.com/2020/12/11/bootstrap-icons-1-2-0/

于 2020-12-24T20:45:42.630 回答
0

看看下面的文档

在HTML中使用此链接

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
于 2021-07-15T22:52:37.120 回答