Semantic UI, загрузка шрифтов, 404

Я пытаюсь установить Semantic UI для моего проекта Phoenix, в то время как я могу легко получить работу css и javascript, я не могу загрузить значки.Semantic UI, загрузка шрифтов, 404

Я добавил фреймворк в папку моего поставщика.

Когда я загрузить мой сайт, я получаю 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)

Но я Stille получаю 404, как я должен настроить Phoenix для того, чтобы загрузить включенные шрифты?

источник

2016-12-18 MartinElvar

Я думаю, вам нужно переместить 'themes' один каталог вверх, прямо под' static/'. Это работает? – Dogbert

@Dogbert Thx, но я получаю тот же результат:/ – MartinElvar

Я также немного потрудился с этим, я извлек шрифты и изображения, чтобы поместить их в папку static/assets, чтобы заставить их работать. –

В основном я использую стандартный семантический ui без каких-либо изменений (без тематики ...).

В моем static/vendor У меня есть папка, где я помещаю все необходимые семантические компоненты (css/js).

В static/assets Я скопировал папку с шрифтами, и я добавил файл 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 я переопределить URL семантико-интерфейс по умолчанию, чтобы все заработало:

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

Это не самое лучшее/чистое решение, я думаю, но на данный момент он все работает. Надеюсь это поможет.

источник

2016-12-18 16:50:36

ответ

Смежные вопросы