Bootstrap Icons
Hi there, I am using Metronic V8.1.7 Laravel and have the application setup and running correctly. Everything is working as expected apart from bootstrap icons are not displaying. The only way I have managed to get them working is by including the src ref in the master layout file:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
This is obviously not ideal as I read up this can present latency issues and security risks.
Can you please provide me some help and advice why the bootstrap icons may not be working?
Replies (4)
I actually had the same problem on my website - the icons weren’t showing up in the list, and I spent quite a bit of time figuring out why. Turns out, it was an issue with how Bootstrap Icons were being loaded.
In my case, the issue was that the icons weren’t included properly in the local assets. The quickest way I got it working was by installing Bootstrap Icons via npm instead of relying on a CDN. If you haven’t done that yet, try this:
npm install bootstrap-iconsAfter that, I made sure to import it properly in app.css (or wherever your styles are managed):
@import "bootstrap-icons/font/bootstrap-icons.css";Then I checked if Laravel Mix or Vite was processing assets correctly. If you’re using Laravel Mix, double-check your webpack.mix.js file. Mine looked something like this:
mix.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
]);Once I recompiled everything with:
npm run dev…the icons started showing up. If that still doesn’t work, open your DevTools (F12 → Network tab) and check if the CSS file is actually loading. Also, make sure some other CSS isn't overriding the icons.
Hi,
Great to hear that the issue has been resolved. I'm glad I could be of help.
Regarding the public plugins file, I apologize if the text I provided was not an exact match. In any case, I'm glad that you were able to find a solution that worked for you. Let me know if you need any further assistance.
Thanks
Thanks for your help, that's resolved the issue. for your example the text in the public plugins file was very similar to what you provided me with but not quite a match. it was previously
@font-face {
font-display: block;
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"),
url("./fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
}
Hi,
Bootstrap icons are included in the bundle file at the path public/demo1/plugins/global/plugins.bundle.css. Please verify if the file contains bootstrap-icon.
@font-face {
font-display: block;
font-family: "bootstrap-icons";
src: url(./fonts/bootstrap-icons/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47) format("woff2"),
url(./fonts/bootstrap-icons/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47) format("woff");
}You can use the bootstrap-icon with the following HTML code:
<i class="bi bi-eye-slash fs-2"></i>
<i class="bi bi-three-dots fs-3"></i>Thanks
