KoeusIss
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.
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
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.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
LostKobrakai
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.KoeusIss
So how people add icons for their project in Phoenix 1.6.15
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:
If you want to process sass files, you can use Dart SaSS:
DartSass - An installer for sass