How do I add bootstrap-icons?

[bbardsley]

Hello,

I was trying to add bootstrap-fonts with npm i bootstrap-icons and adding @import "bootstrap-icons/font/bootstrap-icons.css"; to app.scss. But somehow the font stil doesn't show up when adding <i class="bi bi-youtube"></i> to a shortcode (and then calling the shortcode in a markdown file). What am I doing wrong?

Thanks in advance!

[h-enk]

Make sure to import the scss file to ./assets/scss/app.scss:

/** Import Bootstrap Icons */
@import "bootstrap-icons/font/bootstrap-icons.scss";

And, don't forget to copy ./node_modules/bootstrap-icons/font/fonts/ to ./static/fonts/

Then it should work:

[bbardsley]

Thank you. I forgot to copy the font. You are very helpful. I appreciate it very much.

[technosprout]

Getting and odd error: "assets/scss/app.scss
11:47 ✖ Unexpected extension ".scss" in @import scss/at-import-partial-extension"

[h-enk]

And without the extension?

/** Import Bootstrap Icons */
@import "bootstrap-icons/font/bootstrap-icons";

[mdehollander]

I did the same (but instead of copying use the module.toml file to mount the node_modules dir), but I am running in a strange issue. The request woff file is surrounded by quotes and therefore not found: http://localhost:1313/fonts/%22bootstrap-icons%22.woff2?24e3eb84d0bcaf83d77f904c78ac1f47

Looking in the bootstrap-icons.scss file in the node_modules dir, I see there is a variables (with quotes):

$bootstrap-icons-font: "bootstrap-icons" !default;

When I define this variable in _variables.scss without quotes, the url is correct:

$bootstrap-icons-font: bootstrap-icons

Anyone an idea what is going on here? The fix seems a bit weird to me, but hey, it does work.

[james-d-elliott]

Updated method to include the fonts:

Subject: [PATCH] feat: include bootstrap-icons fonts
---
Index: config/_default/module.toml
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/config/_default/module.toml b/config/_default/module.toml
--- a/config/_default/module.toml	(revision 0dfb77066bfd161d001af579867dcd16532d81fd)
+++ b/config/_default/module.toml	(date 1709887773417)
@@ -26,6 +26,10 @@
   source = "node_modules/@tabler/icons/icons"
   target = "assets/svgs/tabler-icons"
 
+[[mounts]]
+  source = "node_modules/bootstrap-icons/font/fonts"
+  target = "static/fonts"
+
 [[mounts]]
   source = "assets"
   target = "assets"