标签: bootstrap-icons

来自 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" …

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

到目前为止我已经尝试过但没有成功：

@import "../node_modules/bootstrap-icons/font/bootstrap-icons";

.right-square-icon{
  font-size: 4rem;
  @extend .bi;
  @extend .bi-caret-right-square;
  @extend .text-dark;
}

出现错误：

找不到选择器“.bi”。

我最近直接从 3 更新到 bootstrap 5。是的，我跳过了 4。

事情是这样的，早在 3 年前，我就做过这样的事情。

<i class="glyphicon glyphicon-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

现在，使用 bootstrap5 的图标，这是行不通的！

显然，我现在正在使用新图标。

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

<style> i:hover { font-weight: bold; } </style>

但正如我所说，这是行不通的。

为什么？有办法实现这一点吗？

我想在一个有角度的项目中实现引导图标，但它不起作用。我运行了以下命令，

npm i bootstrap-图标

但我无法在带有图标字体的网页中添加图标。

目前，我已在 index.html 文件中添加了引导图标 CDN，并且它正在工作。

我想知道我们是否需要在 angular.jason 文件中的任何位置添加引导程序图标文件的路径，或者它应该在安装命令之后工作。

感谢您的回答！

谢谢。

我试图在所有 dropbtns 的末尾添加一个引导图标，所以我想在我的 css 文件中执行此操作。我可以直接在网页中添加它们的图标，例如 <i class="bi bi-chevron-down"></i> 但我无法让它在 web.css 中工作。它所做的只是添加一个空框，就像找不到图标一样。

他们说它的 css 是 \F282 ( https://icons.getbootstrap.com/icons/chevron-down/ )

html

<button onclick="toggleDropDown(this)" class="dropbtn">请选择一个字段</button>

网页.css

.dropbtn::after{
    content: "\F282";
    justify-content: flex-end;
}

替我回答——

找到了。我必须添加字体系列

.dropbtn::after{
        content: "\f282";
        justify-content: flex-end;
        font-family: "bootstrap-icons";
}

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

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

.accordion-button.collapsed {
    color: white;
    background: blue;
}

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

这是我的 HTML：

<a class="iconContainer" href="#">
  <span class="containerIcon chevron-right"/>
  Test
</a>

这是我的CSS：

.chevron-right::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

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

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

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

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

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

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

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

我在让 bootstrap 图标与 webpack 一起使用时遇到了很多麻烦：

得到以下内容：

ERROR in ./node_modules/bootstrap-icons/font/bootstrap-icons.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @font-face {
|   font-family: "bootstrap-icons";
|   src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") format("woff2"),
 @ ./src/index.js 3:0-50

使用 webpack 规则：

      {
        test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?((v=\d+\.\d+\.\d+)|(\w*)))?$/,
        use: { loader: "file-loader?name=/[hash].[ext]" }
      },
      ...

      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }

和 …