Bootstrap 5 icons not loading

Questions / Help
,
1

Hello folks, I’m working on a new project and I’m trying to implement Bootstrap v5 for my backoffice app, I’m using umbrella app and bootstrap works fine but I’m having problem with bootstrap icons.
I used this guide for bootstrap Phoenix 1.7 and Bootstrap 5 - Tutorials and screencasts for Elixir, Phoenix and LiveView. I tried doing the same for bootstrap-icons by installing as an npm package and import in my app.scss

// app.scss
// Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";

@font-face {
    font-family: 'bootstrap-icons';
    src: font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2') format('woff2'),
    font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff') format('woff');
}
...

Can someone helps me with what I missed here. and forgive my freshness in the Elixir/Phoenix stack.
Regards.

2

The browser only has access to the files in priv/static/…. Your fonts don’t seem to be there. I don’t think sass deals with additional assets your css links to.

3

So how people add icons for their project in Phoenix 1.6.15

4

You have to place icons, assets, images, etc which don’t need any further processing in priv/static folder.

image

Also don’t forget to add entry in the endpoint file if you are creating a top level folder:

  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phx.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/",
    from: :my_app,
    gzip: false,
    only: ~w(assets favicons fonts images favicon.ico robots.txt)

If you want to process sass files, you can use Dart SaSS:
DartSass - An installer for sass

1 Like