Значки Font Awesome — отличный способ добавить изюминку вашему приложению Angular 17. Это руководство покажет вам, как установить и использовать их в вашем проекте, выполнив несколько простых шагов.
Давайте выполним следующие шаги:
Шаг 1. Создайте проект Angular 17
Вы можете легко создать свое угловое приложение, используя следующую команду:
ng new my-new-app
Шаг 2. Установите Font-Awesome
На этом этапе вам нужно просто установить Font-Awesome на свой Angular 17 и импортировать файл CSS в файл style.css. это только для импорта CSS. поэтому вы можете запустить команду ниже:
npm install font-awesome --save
Шаг 3. Импортируйте CSS
После успешной установки Font-Awesome нам нужно импортировать файлы CSS в файл angular.json. поэтому давайте добавим к нему следующие строки.
angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"appFont": {
....
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"src/styles.css"
],
......
ИЛИ, вы также можете указать путь следующим образом, если вышеописанное не работает:
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"appFont": {
....
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"src/styles.css"
],
......
Шаг 4. Используйте значки Font Awesome
Теперь мы готовы использовать классы Font Awesome в нашем html-файле. поэтому давайте добавим следующий код в ваш файл app.comComponent.html.
src/app/app.comComponent.html
<h1>Angular 17 Install Font Awesome Icons Example - ItSolutionStuff.com</h1>
<i class="fa fa-user fa-5x"></i>
<i class="fa fa-dashboard fa-5x"></i>
<i class="fa fa-money fa-5x"></i>
<i class="fa fa-home fa-5x"></i>
<i class="fa fa-th fa-5x"></i>
Вы можете запустить приложение.