установить шрифт awesome 5 в angular-cli 8 для angular 7

Question

Я хочу добавить fontawesome 5 в мой проект angular-cli 8.0.2 (со scss), скопировав шрифты в проект (не связывая их из Интернета) и без использования внешних плагинов / проектов, но прямым способом.

Итак, я создаю проект и устанавливаю fontawesome (бесплатно) через npm следующим образом

ng n --style=scss --routing=true myproject
cd myproject
npm install --save-dev @fortawesome/fontawesome-free

Я изменяю файлы:

• В angular.json в ключе projects.myproject.architect.build.options.styles Я добавляю следующее значение в массив

  "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"

• В styles.scss Добавляю строку:

  @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

• В src/app/app.component.html после Wellcome текст, который я добавляю

  <i class="fas fa-sync-alt"></i>

Тогда язапустите команду ng serve и перейдите в браузер к http://localhost:4200/ и увидите это:

Я использую различные инструкции из Интернета, но это лучший результат, которыйЯ понимаю - но все равно не работает (вместо этого мы видим квадрат , этот значок ). Что нужно сделать, чтобы решить эту проблему?

Answer 1

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

• brands.scss
• solid.scss
• regular.scss
• light.scss

---

Оригинальный ответ

Файл SCSS, который FontAwesome включает в свой пакет NPM, не настраивается для вас: вы должны импортировать отдельные файлы SCSS самостоятельно. (Для получения дополнительной информации см. документы по SCSS части )

Вместо этого вы должны включить уже скомпилированный CSS, чтобы вам не приходилось импортировать файлы SCSS вручную. (Запустите команду ниже, чтобы установить стиль)

ng config projects.myproject.architect.build.options.styles "./node_modules/@fortawesome/fontawesome-free/css/all.css"

(или вручную добавить "./node_modules/@fortawesome/fontawesome-free/css/all.css" к стилям вашего проекта)

Для получения дополнительной информации о том, что FontAwesome включает в свой пакет, обратитесь к документам .