引导图标更改字体路径静态站点

Question

我想在bootstrap-icons中更改@字体面 src路径，因为它没有显示在 index.html中。

我使用sass和laravel来编译css。

这里是我的src/sass/app.scss文件：

@import "~bootstrap-icons/font/bootstrap-icons";

这里是我的index.html文件：

<i class="bi bi-archive-fill"></i>

这里是我的文件结构:

my-app/
├── dist/
│   ├── assets/
│   │    ├── css/
│   │    │    ├── app.css
│   ├── fonts/
│   │    ├── vendor/
│   │    │    ├── bootstrap-icons/
│── src/sass/
│    ├── app.scss
├── index.html

Answer 1

您可以像这样覆盖@字体-face规则：

@import "~bootstrap-icons/font/bootstrap-icons";

@font-face {
  font-family: "bootstrap-icons";
  src:  url("../../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") format("woff2"),
        url("../../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}

我也遇到了类似的问题，这对我来说是有效的:)