Пошаговое руководство по Angular
Font Awesome - это самый популярный в Интернете набор инструментов для работы с иконками, который был переработан и создан с нуля.
Вдобавок к этому такие функции, как лигатуры шрифтов значков, структура SVG, официальные пакеты npm для популярных интерфейсных библиотек, таких как React, и доступ к новому CDN.
В этом посте я покажу вам, как настроить Font Awesome для использования в Angular всего за пять шагов.
На этих шагах мы настроим Font Awesome без использования специального Angular package. В следующей публикации он будет настроен с использованием официального пакета, что еще проще, и у нас будет Font Awesome, работающий с той же экосистемой Angular.
Шаг 1. Начните свой проект
Если вы думаете об использовании Font Awesome в своем проекте Angular, возможно, у вас уже есть инициализированный проект. Однако в этом руководстве давайте начнем с проекта с нуля.
Шаг 2. Установите Font Awesome
Установите Font Awesome.
Шаг 3. Добавьте Font Awesome
Есть несколько способов включить Font Awesome в наш проект:
- Откройте
angular.json
и вставьте новую запись в массив стилей:
2. Откройте styles.scss
и вставьте новую запись в файл:
Шаг 4. Добавьте класс CSS Font Awesome
Откройте компонент вашего шаблона и добавьте класс CSS Font Awesome в любой из элементов HTML:
Шаг 5. Запустите приложение
Запустите ваше приложение:
ng serve
Ресурсы
- Font Awesome
- Ветка GitHub этого поста.