Fontawesome — самый популярный набор иконок. Он имеет более 1500 бесплатных иконок. Самое главное, эти значки создаются с использованием масштабируемых векторов и автоматически наследуют размер и цвет CSS. Это означает, что они сливаются со встроенным текстом, где бы вы их ни разместили. Это делает его высококачественными значками, которые хорошо работают на экранах любого размера.

До Angular 5 нам приходилось устанавливать пакет font-awesome и ссылаться на его css. Теперь у нас есть компонент angular для fontawesome, который делает его простым, чистым и аккуратным.

Ниже приведены пять простых шагов, чтобы добавить компонент fontawesome в ваше приложение angular.

Вы можете скачать исходный код здесь

  1. Создайте новое угловое приложение. И удалите весь код в файле app.component.html. Нам это не нужно, так как мы просто хотим посмотреть, как это использовать.
ng new angular-fontawesome

2. Установите потрясающие угловые компоненты

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Если вы не используете Angular 9+, вам необходимо установить совместимый компонент angular fontawesome.

3. Импортируйте FontAwesomeModule в app.module.ts.

4. Импортируйте значок, который вы хотите использовать, в компонент

Определить классы шрифтов очень просто.

имя класса ‘fa-home’ преобразуется в faHome

имя класса ‘fa-long-arrow-alt-left‘ преобразуется в faLongArrowAltLeft

5. Добавьте иконку в html файл компонента.

<fa-icon [icon]="home"></fa-icon>

Скомпилируйте и запустите его

Удачного кодирования!!