How to use fonts from bootstrap-icons?

Phoenix Forum Questions / Help
, , ,
1

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 :thinking:

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 :thinking:

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 :confused:

Maybe someone can enlighten me :slight_smile:

2

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.

3

For the moment, I am using a custom mix task, that copies a given list of files from assets/<somehwere> to priv/static/assets/fonts/ :man_shrugging:

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 :slight_smile: