我正在尝试使用新的引导图标npm包与gulp 4的最新版本在我的项目一切都安装良好，工作良好。
我遇到的问题是，当我在index.html文件中声明图标时，如下所示：

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

图标不显示，我认为问题来自网络字体。
我是新来的如果有人能帮忙的话，拜托！

这是我的gulpfile.js文件：

"use strict";

const { src, dest, watch, series, parallel } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// FILE PATHS
const files = {
    scssPath: "src/assets/scss/app.scss",
    jsPath: "src/assets/js/app.js",
};

// COMPILE SCSS INTO CSS
function compileSCSS() {
    return src(files.scssPath, { sourcemaps: true })
        .pipe(sass().on("error", sass.logError))
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(dest("public/assets/css", { sourcemaps: "." }));
}

// COPY CUSTOM JS
function compileJS() {
    return src(files.jsPath, { sourcemaps: true })
        .pipe(terser())
        .pipe(dest("public/assets/js", { sourcemaps: "." }));
}

// BROWSER SYNC
function browserSyncInit(cb) {
    browsersync.init({
        server: {
            baseDir: ".",
        },
    });
    cb();
}

function browsersyncReload(cb) {
    browsersync.reload();
    cb();
}

// WATCH FILES
function watchFiles() {
    watch("*.html", browsersyncReload);
    watch([files.scssPath, files.jsPath], series(compileSCSS, compileJS, browsersyncReload));
}

exports.default = series(parallel(compileSCSS, compileJS), browserSyncInit, watchFiles);

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

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

以下是我的文件结构：

my-project/
├── src/assets/scss
│   └── app.scss
├── src/assets/js
│   └── app.js
├── public/assets
│   └── css/
│   └── js/
└── node_modules/
└── index.html
└── gulpfile.js