Иконки FontAwesome в Angular 6?
Я пытаюсь использовать значки из FontAwesome в проекте Angular. Я начал с руководства "Приступая к работе", которое вы можете найти здесь: FontAwesome Angular Начало работы
Все работает нормально, я вижу значок faCoffee, где бы я его ни поместил в своих шаблонах. Но если я попытаюсь изменить его на другой значок (например, значок «галочка»), ничего не будет показано.
Я изменил объявление своего значка на уровне компонента, чтобы он выглядел так:
import { faCheck } from '@fortawesome/free-solid-svg-icons';
Изменен шаблон html, чтобы показать мой новый значок:
<fa-icon [icon] = "faCheck"></fa-icon>
Затем назначение поля значка в моем компоненте:
faCheck = faCheck;
Обратите внимание, что я изменяю по существу только имя значка из примеров, которые я тестировал и которые работают с URL-адресом, который я опубликовал выше. Даже если я перейду к определению «faCheck» в своем объявлении, я вижу, что он определен, поэтому я ожидаю, что он будет доступен.
Консоль Chrome показывает эту ошибку при загрузке страницы:
FontAwesome: Could not find icon. It looks like you've provided a null or undefined icon object to this component.
Первая попытка использовать FontAwesome в моих проектах, полезная общая информация приветствуется.
Обновлено: Получил работу по восстановлению всего моего приложения. Я использовал VS Code, поэтому, когда вы сохраняете файл, он пытается воссоздать окончательный пакет, чтобы вы могли перемещаться и проверять вашу разработку. Я не знаю, что на самом деле происходит с состоянием компонентов в памяти. Я думаю, что значок не отображался из-за некоторого несовпадения ссылок.
Ответы 3
все, что вам нужно сделать, это:
1 - добавьте это в свой index.html:
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity = "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin = "anonymous">
2 - используйте свой значок как:
<i class = "fas fa-check"></i>
Вам не нужно ничего добавлять ни в свой component.ts, ни в свой app.module.ts, ни устанавливать что-либо с помощью yarn или npm.
Обновлено: Чтобы ответить на ваш вопрос, вот stackblitz с faCheck, который используется, как упоминалось в руководстве, он работает для меня: https://stackblitz.com/edit/angular-4ebr9t
проверьте, установили ли вы все зависимости, как сказано в руководстве.
Хорошо, мне довольно ясно, как их использовать, как вы сказали. Но мой вопрос касается среды Angular и официального руководства, которое вы можете найти здесь: fontawesome.com/how-to-use/on-the-web/using-with/angular
вы также можете скачать файл и использовать его серверную копию
Не хочу, потому что в этом нет необходимости
этот способ отлично работает в среде angular, я использовал такой шрифт в моем Angular Project, и он работает как шарм
Я знаю, что ваш способ работает, я использовал его несколько раз в прошлом. Но я увидел этот новый подход, основанный на угловых компонентах, и захотел его попробовать.
Получил, что он работает так, как я связал здесь (с использованием нового компонента NG) ... изменение значка на случайный "faBug" работает. Возможно, это проблема с конкретным значком, который я пытаюсь использовать в своем вопросе
в зависимости от примера stackblitz вы использовали 'fortawesome / angular-fontawesome'
Я использую Fontawesome в этом проекте angular6, взгляните на package.json, возможно, это поможет решить вашу проблему: https://github.com/hamilton-lima/portfolio-web/blob/master/package.json
Это то, что я установил
"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-brands-svg-icons": "^5.1.0",
"@fortawesome/free-regular-svg-icons": "^5.1.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",
"angular-font-awesome": "^3.1.2",
Обязательно импортируйте необходимые значки в используемую вами библиотеку.
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fas, far, fab);
См. Пример здесь: https://github.com/hamilton-lima/portfolio-web/blob/master/src/app/shared/shared.module.ts
Обновлено с подробностями, которые могут быть основной причиной
Я тоже не понимаю :)
Помните, что импорт всего набора значков может привести к раздуванию вашего приложения. Пожалуйста, импортируйте только те значки, которые вы будете использовать. github.com/FortAwesome/…
не удастся ли при встряхивании дерева удалить неиспользуемые значки?
1- Установите этот npm install @fortawesome/fontawesome-free
2- Добавьте это в angular.json (angular-cli.json)
"styles": [
"...",
"./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]
3- Теперь вы можете использовать шрифты с тегом <i>
Спасибо за обновление, это тоже решило мою проблему. Я использовал HMR, и мне снова пришлось чистить мои / dist и
ng build