janp
I am using Elixir and Phoenix for more than 5 years and I only built API applications in the past, so I never had the need to care about assets etc. and when I needed them, I always used the CDN-files.
This time I wanted to have a look into this because it is one of the major things I really don’t know anything about. I created a new phoenix application with mix phx.new --no-tailwind. I used --no-tailwind because I know Bootstrap way better than Tailwind.
CSS and JS is working fine, I can use Bootstrap for my application, but I also want to use the bootstrap icons, so I added them via yarn add -D bootstrap-icons.
Here are the most important parts of my application that are somehow related to my issue:
mix.exs
# ...
def deps do
[
# ...
{:dart_sass, "~> 0.7.0", runtime: Mix.env() == :dev}
]
end
def aliases do
[
# ...
"assets.setup": ["sass.install --if-missing", "esbuild.install --if-missing"],
"assets.build": ["sass default", "esbuild default"],
"assets.deploy": ["sass default --no-source-map --style=compressed", "esbuild default --minify", "phx.digest"]
]
end
# ...
config/config.exs
# ...
config :dart_sass,
version: "1.61.0",
default: [
args: ~w(css/app.scss ../priv/static/assets/app.css),
cd: Path.expand("../assets", __DIR__)
]
assets/package.json
{
"devDependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.1"
}
}
assets/css/app.scss
// Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// Bootstrap Icons
@import "../node_modules/bootstrap-icons/font/bootstrap-icons";
assets/js/app.js
# ...
import "bootstrap"
# ...
When I now try to access a font, I only get a 404 page ![]()
http://localhost:4000/assets/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47 →
404 Not Found
I can make it work when copying the fonts to priv/static/assets:
cp -r assets/node_modules/bootstrap-icons/font/fonts priv/static/assets/
But I can’t believe CSS and JS asset management is automated, but for using fonts I need to copy them manually ![]()
I found some articles that are speaking about fonts, but those were quite old and some extra dependencies I would need to install have already been deprecated, so I am a bit lost ![]()
Maybe someone can enlighten me ![]()
Trending in Questions
Other Trending Topics
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
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex










Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
yasoob
Were you able to figure this out? I encountered a similar issue earlier and was clueless. Would love to hear some input from experienced folks on how to properly make use of an icon font in Phoenix.
janp
For the moment, I am using a custom mix task, that copies a given list of files from
assets/<somehwere>topriv/static/assets/fonts/This way I could continue with my stuff. Would still be cool to hear how others are doing it and whether there is a “right” way to do this