问题标签 [bootstrap-icons]

我正在创建一个 Vue2 应用程序并想使用 Bootstrap5 图标。具体来说，我希望能够使用“图标字体”类型（即<i class="bi-alarm"></i>）而不是嵌入 SVG 元素。

所以，我已经像这样安装了 npm 包：

npm i bootstrap-icons

但是……现在呢？Bootstrap5 图标文档没有进一步说明。我需要安装 SASS 包吗？我应该创建一个 Vue 插件吗？或者，只是根据需要为每个组件导入图标？

我正在使用 Vue-CLI。

谢谢你的任何提示！

我正在尝试将 Bootstrap 搜索图标放在<input>. 但是，很明显我不能只写<input type="text" placeholder="<i class='bi bi-search'>"占位符。我检查了 Stackoverflow，发现对于fontawesome，我们可以简单地把

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />（对于 4.7+ 版本）。

但是我想知道的是，是否也有某种方式可以通过引导程序实现这一目标。我检查了bootstrap-icon CSS文件并发现了这个.bi-search::before { content: "\f52a"; }. 编辑：-我想把它放在占位符而不是在<input>字段中希望我把问题说清楚了。

我在导航栏上的搜索按钮有一个引导图标和未垂直对齐的文本

小提琴链接：小提琴

用于搜索的html：

我尝试过的搜索中的css：

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

我的 HTML

<a href="index.php" class="btn btn-outline-dark col-1"><i class="bi bi-alarm-fill"></i></a>

我想在<a>标签内使用 Bootstrap 图标。作为回应得到[]（正方形）。

如何解决这些错误？

在theme-style.css中有这个代码

是否可以像导入 bootstrap.scss 一样在 scss 文件中导入和扩展 bootstrap-icons.css？

到目前为止我没有成功的尝试：

出现错误：

未找到选择器“.bi”。

我在让引导图标与 webpack 一起工作时遇到了很多麻烦：

获得以下内容：

使用 webpack 规则：

和 .js 作为

我已经尝试了我能找到的一切。我遵循了这个教程的每一行，但仍然无法让它工作： https ://odan.github.io/2021/01/07/webpack-bootstrap-icons.html

在下面的屏幕截图中，我尝试在 2 个不同的列中添加 2 个按钮图标，这些列也是一行的子项。

如您所见，我希望这些按钮在列中尽可能大。

这是我针对该特定行的代码；

我尝试了一些东西，但无法得到正确的设计

我需要 -

1. 在加载 DOM 内容时创建引导图标（心形）
2. 单击图标时，心形图标填充为红色（这里我使用心形填充图标）
3. 两个图标都比原来的大

当我点击心脏时，它充满了黑色，而不是红色。我也不知道如何通过增加宽度和高度的值来使其更大。我看到了与此相关的其他问题，但没有一个能解决我的问题。

我有一个网络应用程序，用户可以在其中添加新类别。该类别正在使用表单帖子插入到数据库中。

这个类别应该有一个用户应该能够选择的图标（引导图标https://icons.getbootstrap.com/ ）。

我使用引导框架 5.1.3 进行开发。

我找不到从 1500 个项目中选择一个项目的用户友好的可能性。

我已经在表单中使用带有选项的选择元素进行了检查。这里的问题是用户只能看到图标的名称，而不能看到图标的图像。Bootstrap 不支持将图像添加到选项中。

有谁知道如何实现用户友好的可能性，以便从用户可以在选择之前看到图标的大图标集中选择图标？

它应该能够将所选图标的名称保存在数据库中。

如果有人可以帮助我，那就太好了:)。

非常感谢大家:)