Semantic UI, loading fonts, 404

Question

I'm trying to install Semantic UI for my Phoenix project, while i can easily get the css and javascript working, i fail to load the icons.

I've added the framework to my vendor folder.

When i load my site i get 404 on the following paths.

GET http://localhost:4000/css/themes/default/assets/fonts/icons.woff2 
GET http://localhost:4000/css/themes/default/assets/fonts/icons.woff 
GET http://localhost:4000/css/themes/default/assets/fonts/icons.ttf 
GET http://localhost:4000/themes/default/assets/fonts/icons.woff2 
GET http://localhost:4000/themes/default/assets/fonts/icons.woff 
GET http://localhost:4000/themes/default/assets/fonts/icons.ttf 

So i then added the themes folder do my Plug.Static.

  plug Plug.Static,
    at: "/", from: :myapp, gzip: false,
    only: ~w(css fonts images themes js favicon.ico robots.txt)

But i'm stille getting 404, how should i configure Phoenix in order to load the included fonts?

Answer 1

I basically use the standard semantic ui without any changes (no theming ...).

In my static/vendor I have a folder where I put all the necessary semantic-ui components (css/js).

In the static/assets I have copied the fonts folder and I added the flags.png file in the static/assets/images folder.

In the file lib/your_app/endpoint.ex I have:

  plug Plug.Static,
    at: "/", from: :welcome_a, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)

So the fonts are served.

Now the tricky part:

In my css I override the semantic-ui default url to get things working:

// Flags sprite URL

i.flag:not(.icon):before 
  background-image: url("/images/flags.png")


// Icons

@font-face 
  font-family: 'Icons'
  src: url("/fonts/icons.eot")
  src: url("/fonts/icons.eot?#iefix") format('embedded-opentype'), url("/fonts/icons.woff2") format('woff2'), url("/fonts/icons.woff") format('woff'), url("/fonts/icons.ttf") format('truetype'), url("/fonts/icons.svg#icons") format('svg')
  font-style: normal
  font-weight: normal
  font-variant: normal
  text-decoration: inherit
  text-transform: none

It's not the best/clean solution I think, but for the moment it get things working. Hope this helps.