语义UI，加载字体，404

Question

我正在尝试为我的Phoenix项目安装语义用户界面，而我可以很容易地让css和javascript工作，我无法加载图标。

我已将框架添加到我的供应商文件夹中。

当我加载我的网站时，我会在以下路径上获得404.

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 

所以我然后添加了主题文件夹做我的Plug.Static。

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

但是我很容易得到404，我应该如何配置凤凰以加载包含的字体？

Answer 1

我基本上使用标准语义ui而没有任何变化（没有主题......）。

在我的static/vendor我有一个文件夹，其中我放置了所有必要的语义ui组件（css / js）。

在static/assets我复制了fonts文件夹，并在flags.png文件夹中添加了static/assets/images文件。

在lib/your_app/endpoint.ex文件中，我有：

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

所以提供了字体。

现在是棘手的部分：

在我的css中，我覆盖了semantic-ui默认网址以使工作正常：

// 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

这不是我认为最好/最干净的解决方案，但目前它让事情变得有效。希望这会有所帮助。