I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly.
However, I encountered an issue when trying to declare the icon in my index.html file like this:
<i class="bi bi-alarm"></i>The icon wasn't displaying on the webpage, and I suspect the problem might be related to web fonts.
As someone who is new to Gulp, I would appreciate any help or guidance on this matter!
Below is a snippet from my 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();
// More code here...
Included below is a sample excerpt from my src/assets/scss/app.scss file:
@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons";Also, here is a brief overview of my project's file structure:
my-project/
├── src/assets/scss
│ └── app.scss
├── src/assets/js
│ └── app.js
├── public/assets
│ └── css/
│ └── js/
└── node_modules/
└── index.html
└── gulpfile.js