Настроить шрифт awesome 5 в angular-cli 8 для angular 7
Я хочу добавить fontawesome 5 в свой проект angular-cli 8.0.2 (с scss), скопировав шрифты в проект (не связывая их из Интернета) и без использования каких-либо внешних плагинов/проектов, а напрямую.
Итак, я создаю проект и устанавливаю fontawesome (бесплатно) через нпм следующим образом.
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/ и вижу это:
Я использую разные инструкции из Интернета, но это лучший результат, который я получаю, но все равно не работает (мы видим квадрат вместо этот значок). Что делать, чтобы решить эту проблему?
когда я не меняю styles.scss, тогда «квадратная иконка» не будет видна
Как насчет того, чтобы попробовать удалить импорт в файле styles.scss и вместо этого импортировать файл all.css из node_modules/@fortawesome/fontawesome-free/css/all.css в angular.json?
Скорее всего, это не работает, потому что путь, указанный в fa.scss, неверен для вашего проекта, то есть браузер не может найти шрифт в этом месте и поэтому отображает только квадраты. Но чтобы убедиться в этом, вам нужно будет отладить это с помощью инструментов разработчика и посмотреть, какой файл шрифта загружен (посмотрев на вкладку сети в инструментах разработчика).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Обновлено: Причина, по которой значки не отображаются, заключается в том, что вы не указали тип стиля значков. Вы можете найти список поддерживаемых стилей значков здесь (или перечисленных ниже):
brands.scsssolid.scssregular.scsslight.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 включает в свой пакет, обратитесь к документы.
Я только меняю импорт в стили.css на @import "../node_modules/@fortawesome/fontawesome-free/css/all.css"; и все работает :) - спасибо
Font Awesome теперь предоставляет Компонент Font Awesome Angular, но вы также можете использовать следующий простой подход:
npm install --save @fortawesome/fontawesome-free
Загрузите значки Font Awesome, просто добавив следующее в styles.scss:
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
Протестировано на Angular v8.2.14 и Angular CLI v8.3.19.
это должен быть принятый ответ. Мне не хватало "@", чтобы найти его, мне потребовалось несколько часов.
По какой причине вы дважды импортируете один и тот же файл SCSS?