来自 Font Awesome 我想使用新的引导图标 https://icons.getbootstrap.com/在我的网络项目中。不幸的是，就我必须插入的代码量而言，包含 Bootstrap 图标似乎更加乏味。
我在寻找什么：
以图标为例bi-chevron-right。有什么方法可以使用 Bootstrap Icons 作为字体吗？伪代码：
<i class="bi bi-chevron-right"></i>
这种方式有几个好处：
- 简单干净地包含图标。
- 由于项目的所有图标仅包含 1 个外部文件，因此加载时间更短。
- 放置实际图标库的位置更加灵活（考虑选项 b），如果您更改库的路径，则必须更新所有引用！）。
- 无需对实际图标大小进行硬编码，因为这可以通过纯 CSS 进行控制。
什么是docs https://icons.getbootstrap.com/#usage目前仅提供：
该文档当前提供了多种插入图标的方法。所有这些都包含一些需要编写的代码。
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）基本相同，只是更乏味。）
或者我错过了什么？
还起作用的是：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
