Laravel + Bootstrap Icons

Question

I added bootstrap-icons to my Laravel 8 project via command line npm i bootstrap-icons

I had already run before npm install and npm run dev to enable Laravel/UI.

But when I try to insert a simple icon <i class = "bi bi-alarm"> </i>, it is not displayed.

if you want to use bootstrap or bootstrap-icons with Vite in Laravel then follow this steps https://stackoverflow.com/a/76139847/14344959 — Harsh Patel, Apr 30 '23 at 07:08

score 5 · Answer 1 · answered Mar 19 '21 at 18:59

5

Edit file: resources/sass/app.scss and add:

// Bootstrap-icons
@import '~bootstrap-icons/font/bootstrap-icons.css';

Then rebuild:

$ npm run dev

answered Mar 19 '21 at 18:59

kjaneczko

score 0 · Answer 2 · answered May 26 '23 at 13:14

For Laravel 10

Install bootstrap icons with:

sail npm i bootstrap-icons

Then update you're vite-config and add the resolve part:

plugins: [
    ...
],
resolve: {
    alias: {
        '~bootstrap-icons': path.resolve(__dirname,'node_modules/bootstrap-icons'),
    }
}

Now we can add the bootstrap icons in our app.scss file:

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

At last we want to build:

sail npm run build

Now you can use bootstrap icons in you're html by:

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

If you are not using sail u can run it without the "sail" part and should use npm run dev to rebuild and use the application.