How to add bootstrap-icons.scss to asset module

[ezzle]

Hi
.
I am trying to use bootstrap-icon as web fonts in a widget.

But I am always getting the following error
GET http://localhost:3000/apos-frontend/default/fonts/bootstrap-icons.woff?1fa40e8900654d2863d011707b9fb6f2 net::ERR_ABORTED 404 (Not Found)

Please Help .

Best regard

Tshitshi

[BoDonkey]

Hi,
Can you please give a little more info about how you are trying to bring the icons into your project? Also, how are you using them in your widget?
Thanks,
Bob

[ezzle]

Bootstrap-icons installed as npm module :
npm i bootstrap-icons

asset module : index.scss
@import "./scss/bootstrap"; @import "./scss/bootstrap-icons.css"
or
@import "./scss/bootstrap"; @import "/node_modules/bootstrap-icons/font/bootstrap-icons"

custom widget module : widget.html

\<section data-bootstrap-widget> \<i class="bi-alarm-clock"></i> \<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i> \<button type="button" class="btn btn-primary">Primary</button> \</section>

[BoDonkey]

Well, it doesn't seem right to me, but looking around the web, it seems like Sass doesn't like relative URLs in npm packages. Again, it doesn't seem quite right, but you can get it working with two changes.

1. create a new scss partial file and import it before the bootstrap-icons.scss file - not the .css file. In that new file, define the $bootstrap-icons-font-dir as /modules/asset/fonts.
2. copy the two font files from node_modules/bootstrap-icons/font/fonts into the modules/asset/public/fonts folder.

This worked for me, just doesn't seem like you should have to do this.
Cheers,
Bob

[ezzle]

Thank you Bob. Worked fine !

Best regards.