Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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-icons

After 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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(