Fontawesome — самый популярный набор иконок. Он имеет более 1500 бесплатных иконок. Самое главное, эти значки создаются с использованием масштабируемых векторов и автоматически наследуют размер и цвет CSS. Это означает, что они сливаются со встроенным текстом, где бы вы их ни разместили. Это делает его высококачественными значками, которые хорошо работают на экранах любого размера.
До Angular 5 нам приходилось устанавливать пакет font-awesome и ссылаться на его css. Теперь у нас есть компонент angular для fontawesome, который делает его простым, чистым и аккуратным.
Ниже приведены пять простых шагов, чтобы добавить компонент fontawesome в ваше приложение angular.
Вы можете скачать исходный код здесь
- Создайте новое угловое приложение. И удалите весь код в файле 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>
Скомпилируйте и запустите его
Удачного кодирования!!