Does laravel 9 supports bootstrap 5 icons?

Question

This is my composer.json file of laravel 9 project

 "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "bootstrap-icons": "^1.10.3",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    },

This is my resoures/js/app.js file

import './bootstrap'
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'
import '~bootstrap-icons/font/bootstrap-icons.css'

this is my resources/sass/app.scss

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

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

Now, my view has bootstrap icons class but icons are not being seen in browser.

<i class="fs-4 bi-speedometer2">
<i class="fs-4 bi-house">

I am not seing any icons in my browser

according to documentation it must work after installing the dependency, but is not working. — Ganesh Adhikari, Jan 22 '23 at 01:33
if you want to use bootstrap, bootstrap-icons, or font awesome with Vite in Laravel then follow this steps https://stackoverflow.com/a/76139847/14344959 — Harsh Patel, Apr 30 '23 at 07:07

score 0 · Answer 1 · edited Jun 23 '23 at 19:44

0

Laravel 9 does not come with built-in support for Bootstrap 5 icons. However, you can easily add Bootstrap 5 icons to your Laravel 9 application by installing the necessary dependencies and configuring your project accordingly.

Add the Bootstrap icons package to your project by running the following command:

composer require twbs/bootstrap-icons

After installing the package, you'll need to import the icons in your project's app.scss file.

@import "~twbs/icons/scss/icons";

To use the icons, you can use the bi class provided by the package.

<i class="bi bi-search"></i>

If you want to use javascript icons you need to import the icons in your app.js file and use the icons() method provided by the package.

import 'twbs/icons';

icons();

You can also use the icons with svg format if you need it.

<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
  <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>

edited Jun 23 '23 at 19:44

Popnoodles

28,090
2
45
53

answered Jan 22 '23 at 06:40

Anil Tomar

82
4

composer require twbs/icons, This command results in: – Ganesh Adhikari Jan 22 '23 at 07:39
"Could not find a matching version of package twbs/icons. Check the package spelling, your version constraint and that the package is available in a stability which matches your minimum-stability (dev)." error – Ganesh Adhikari Jan 22 '23 at 07:39
It’s `tens/bootstrap-icons` – dbf Jan 22 '23 at 10:32
You can try to use a different version of the package, by specifying the version in the composer.json file or by running the command composer `require twbs/icons:` – Anil Tomar Jan 22 '23 at 11:12
find package version here https://packagist.org/packages/twbs/bootstrap-icons#v1.7.0 – Anil Tomar Jan 22 '23 at 11:12

Does laravel 9 supports bootstrap 5 icons?

1 Answers1