Пошаговое руководство по 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 в наш проект:

  1. Откройте angular.json и вставьте новую запись в массив стилей:

2. Откройте styles.scss и вставьте новую запись в файл:

Шаг 4. Добавьте класс CSS Font Awesome

Откройте компонент вашего шаблона и добавьте класс CSS Font Awesome в любой из элементов HTML:

Шаг 5. Запустите приложение

Запустите ваше приложение:

ng serve

Ресурсы