bootstrap-icons 更改字体路径静态站点答案

【问题标题】：bootstrap-icons change fonts path static sitebootstrap-icons 更改字体路径静态站点
【发布时间】：2021-06-11 12:44:16
【问题描述】：

我想更改 bootstrap-icons 中的 @font-face src 路径，因为它没有显示在我的 index.html 中p>

我正在使用 sass 和 laravel-mix 编译成 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

【问题讨论】：

标签： html css sass bootstrap-5

【解决方案1】：

您可以像这样覆盖@font-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");
}

我遇到了类似的问题，这对我有用:)

【讨论】：