mwillema
Hi everyone,
Using Elixir Phoenix and esbuild, I installed fontawesome using NPM in the assets folder. I can properly load the SCSS files, but the fonts do not load. I get the following error:
no route found for GET /node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf
Any idea how could I fix this?
PS: My esbuild config is:
config :esbuild, version: "0.14.0", default: [ args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*), cd: Path.expand("../assets", __DIR__), env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} ]
Thanks in advance for your help!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
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
- #ai
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Producing high quality Elixir screencasts since 2017.
**Building the future of software with AI, trust, and human connection.**
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 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
soup
That URL looks pretty suspect to me. You should be able to peek at
priv/static/assetsand see if the font files are being placed in there.If they look good, check that you’re importing/including/whatevering them correctly in the JS (or whatever)?
mwillema
The font files are not placed in priv/static/assets, only the scss is compiled and injected into the app.css file.
Somehow it looks like esbuild (or whatever) does not move the font files in the priv folder.
soup
This gist seems to imply you need to do some lifting yourself maybe, specifically adding loaders for font file types?
See also
esbuild content types css
esbuild content types external file (needs manual enable!)
Might help?
mwillema
It would probably help but I don’t find it an elegant solution. It’s more of a hack. I’d like to be in control of all the code I’m writing, especially when it’s deployed into prod
Btw I found another solution, also a workaround but IMO less messy. I simply symlinked the fonts into
priv/static/fontsand set$fa-font-path: "/fonts";It worked