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?
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-icons
@import "bootstrap-icons/font/bootstrap-icons.css";
mix.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
]);
npm run dev
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");
}
<i class="bi bi-eye-slash fs-2"></i>
<i class="bi bi-three-dots fs-3"></i>