KoeusIss
Bootstrap 5 icons not loading
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.8 and Bootstrap 5 · FullstackPhoenix. 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.
Most Liked
kartheek
You have to place icons, assets, images, etc which don’t need any further processing in priv/static folder.
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
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Real-time error tracking, performance insights, and observability for devs.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"