How do I use the bootstrap icon package in angular

Question

I downloaded the bootstrap icon and font awesome packages. But I don't know how to use it, I just imported the following into styles.css file: @import "~bootstrap/dist/css/bootstrap.css"; @import "~font-awesome/css/font-awesome.css"; @import "~bootstrap/dist/css/bootstrap.css"; @import "~font-awesome/css/font-awesome.css";

I guess I need to add something in the angular.json file, but I'm typing the path incorrectly enter image description here

I want it to look like this:

enter image description here

But it looks like this:

enter image description here

Answer 1

$ npm i bootstrap-icons

And add follow line to style.css file:

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

And use icons like that(just example):

<i class="bi bi-person-fill"></i>

You can find any icons you would like to use in follow bootstrap official docs: bootstrap icons

Answer 2

Try after removeing ./ . like:

"styles": [
  "node_modules/font-awesome/css/font-awesome.css",
  "node_modules/bootstrap/dist/css/bootstrap.css",
],