Я использую Webpack 4 и Font Awesone 5 (FA).
Когда я импортирую FA как:
@import '~@fortawesome/fontawesome-free/css/all.css';
Иконки , показывающие на следующих уровнях:
http://some.com
https://some.com/first/
И не показывает на следующих уровнях сайта:
1. https://some.com/first/next/
2. https://some.com/first/next/level
Когда я открываю вкладки сети в Chrome devtools и смотрю второй URL, я вижу, что браузер пытается загрузить шрифты через этот путь:
https://some.com/first/next/web/fonts/fa-solid...*.woff
Как мы видим, браузер использует относительный путь для получения шрифтов, тогда как следует использовать абсолютный путь. Я думаю, возможно, проблема в том, что я неправильно импортировал шрифты через Webpack.
Я импортировал шрифты следующим образом:
$fa-font-path: '/web/fonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
Я предполагал, что эта опция будет работать правильно, но в этом случае вообще ничего не работает. Что я делаю не так?
пс. Все файлы шрифтов присутствуют в домашнем каталоге шрифтов и имеют проблемы с доступом
браузер через https://some.com/web/fonts/