问题标签 [bootstrap-icons]

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

我在找什么：

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

这样会有几个好处：

• 简单而干净地包含一个图标。
• 更好的加载时间，因为项目的所有图标只包含 1 个外部文件。
• 更灵活地放置实际图标库的位置（考虑选项 b），您更改库的路径，您必须更新所有引用！）。
• 实际图标大小没有硬编码，因为这可以通过纯 CSS 控制。

文档目前仅提供的内容：

文档当前提供了几种插入图标的方法。所有这些都包括一些安静的代码来编写。

a) 直接嵌入 SVG：

b) 或使用 SVG 精灵：

c) 或链接外部图像：

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

还是我错过了什么？

我想知道当我将鼠标悬停在引导图标上时如何显示它的填充版本。

我有这个代码：

（云加号图标），我想知道如何将它合并到它的填充伙伴（云加号填充图标）。如何？

这是我的 HTML：

这是我的CSS：

由于某种原因，该图标未显示。这与此处的引导图标文档中显示的示例几乎相似： https ://icons.getbootstrap.com/#usage

有没有人知道我做错了什么？我想我错过了一些非常明显的东西。这是它的 jsFiddle 链接。https://jsfiddle.net/w5bvs7n6/8/

编辑：我想这与内容为空有关，但如果不是，我不知道它会如何工作。

在 Drupal Commerce 购买漏斗中，订单的每个步骤都有图像。

我想用 SVG 替换图像。

这是CSS：

和 HTML：

这是结果：

https://ibb.co/HthgZDL

我想用下面的 SVG 替换图像：

第 1 步：https ://icons.getbootstrap.com/icons/info-circle/

第 2 步：https ://icons.getbootstrap.com/icons/file-text/

第 3 步：https ://icons.getbootstrap.com/icons/bag/

我在 CSS 文件中尝试了以下代码，但它不起作用：

我试图在折叠时更改 Bootstrap 5 的手风琴的“手风琴按钮”颜色。

我在下面试过。它会更改背景，但不会更改按钮的图标颜色。

我应该怎么做才能更改 Bootstrap 5 的手风琴的向下（折叠）图标？

我用 Angular 11 和 bootstrap 和 bootstrap-icons 实现了一个简单的按钮。当我路由显示按钮的页面时，按钮会立即加载。但只有在大约 500 毫秒后，图标才会弹出并且看起来像是在闪烁。

我怎样才能摆脱这种行为？它也发生在列表视图中的图标等等。

是否可以在 CSS中调整引导图标的大小？图标是 SVG。我在 HTML 中添加图标，而不是通过 CSS。

我通过命令行将引导图标添加到我的 Laravel 8 项目中npm i bootstrap-icons

我之前已经运行npm install并npm run dev启用了 Laravel/UI。

但是当我尝试插入一个简单的图标<i class = "bi bi-alarm"> </i>时，它不会显示。

我正在尝试在 react-native 中使用引导图标，但我找不到任何有用的方法来说明如何在 react-native 中渲染 SVG。有谁知道怎么做？

我正在尝试在我的 PCF 控件中使用 Bootstrap 图标，但我在显示图标时遇到了问题，因为没有包含字体

包括 Bootstrap-Icons：npm i bootstrap-icons产生以下package.json

但是当我跑步时，我npm start看不到图标。

如何告诉npm build命令包含fonts目录？