Is it possible to @import bootstrap icons in the scss file and use it via @extend in other scss classes?

Question

Is it possible to import and extend the bootstrap-icons.css in the scss file like importing the bootstrap.scss?

What I've tried so far without success:

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

.right-square-icon{
  font-size: 4rem;
  @extend .bi;
  @extend .bi-caret-right-square;
  @extend .text-dark;
}

with the error:

The selector ".bi" was not found.

Answer 1

Yes it is possible to import bootstrap-icons via scss.

@import "~bootstrap-icons/font/bootstrap-icons.css";

Answer 2

All response is incomplete or wrong.

You need 2 things :

• override $bootstrap-icons-font-src bootstrap variable which set by wrong path compilation for webpack encore

• import bootstrap-icons.scss with relative path in your global.scss file

Result :

$bootstrap-icons-font-src: url("../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), url("../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";

Then, just this run like a charm :

<i class="bi bi-plus-square-fill" style="font-size: 2rem; color: cornflowerblue;"></i>

Context of response :

• PHP 8
• Symfony 6.2
• Webpack encore

Answer 3

You can import the "bootstrap-icons.scss" file and edit the font files' location variable like this -

$bootstrap-icons-font-src: url("../webfonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"), url("../webfonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff");

@import "~bootstrap-icons/font/bootstrap-icons.scss";