Потрясающие иконки в виде пустых квадратов

Question

Вот как я импортирую font-awesome в свой файл main.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

@import '~@fortawesome/fontawesome-free/scss/regular'; 

Я использовал webpack, и все, вероятно, построено правильно, но по какой-то причине значки не отображаются.

Редактировать 1:

После того, как я внедрил значки решения, я начал рендеринг, но только при запуске webpack-dev-server

Но значки по-прежнему не отображаются при создании папки dist

Ошибки в консоли:

Полагаю, что-то не так с моим webpack.config.js причиной, по которой после процесса сборки у меня есть папка /fonts внутри моего dist

Answer 1

Решение состоит в том, что вам нужно импортировать все эти .scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; 
@import '~@fortawesome/fontawesome-free/scss/solid'; 
@import '~@fortawesome/fontawesome-free/scss/regular'; 
@import '~@fortawesome/fontawesome-free/scss/brands';