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

user_11999287 0
Viewed 1587

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.

bootstrap-icons twitter-bootstrap sass css
2 Answers

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";
user_38663640

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

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