Как добавить Font Awesome в Ionic 4

Чтобы заставить Font Awesome работать в проекте Ionic 4, вы можете выполнить следующие шаги.

Во-первых, вам нужно установить все пакеты npm, первые два обязательны, но вы можете решить, нужны ли вам значки solid, regular или brands, я буду использовать их все. Идите вперед и выполните следующие команды npm в своем терминале:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/angular-fontawesome
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Сделав это, перейдите к app.module.ts в своем проекте и добавьте следующее:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

В зависимости от того, какие пакеты шрифтов вы установили, добавьте следующее:

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

После того, как они будут импортированы вверху вашего файла, вам нужно будет включить FontAwesomeModule в ваш импорт:

.....
imports: [...., FontAwesomeModule],
.....

Еще раз, в зависимости от того, какие значки вы выбрали, вам нужно будет добавить их в библиотеку Font Awesome, которая была импортирована ранее. Добавьте это под своим последним импортом (выше @NgModule()):

library.add(fas, far, fab);

Затем перейдите к модулю страницы, в котором вы хотите использовать шрифты, например home.module.ts, а затем импортируйте и добавьте FontAwesomeModule:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
....

@NgModule({
    imports: [
        ...
        FontAwesomeModule
        ...
    ],
})

Затем, наконец, вы можете использовать значок в HTML-коде этой страницы, вставив следующее в нужное место:

<fa-icon [icon] = "['fas', 'graduation-cap']" slot = "end"></fa-icon>

Вы можете заменить fas на правильную библиотеку, то есть far, fas и fab, а затем имя значка, которое в данном случае было graduation-cap.

На всякий случай, если кто-то имеет дело с FontAwesome PRO. Недавно я купил профессиональные иконки FontAwesome и интегрировал их следующим образом:

• скопируйте папку веб-шрифтов FontAwesome в src/assets/
• скопируйте папку FontAwesome scss в src/theme/

• измените путь $fa-font-path в _variables.scss с помощью assets/webfonts !default;

• добавить в global.scss

  @import './theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/solid.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/brands.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/light.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/regular.scss';

Наконец, вы можете использовать их с тегом i. Например

<i class = "fas fa-stack-overflow"></i>

вы можете найти более подробную информацию о fa-классах здесь https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

Выполните следующую команду:

npm install --save-dev @fortawesome/fontawesome-free

Затем в angular.json добавьте это к «стилям»:

{
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

Самый простой способ для пользователя Angular — написать ng add @fortawesome/angular-fontawesome@latest

Я ломал голову, пытаясь заставить это работать с Ionic 5/Angular 10, и не смог заставить его работать. В конце концов я подумал, вдруг кому-то это понадобится.

Для ионных 5/угловых 10

Запустите ng add @fortawesome/angular-fontawesome@latest в папке вашего проекта и выберите нужные значки.

В app.module.ts добавьте следующее:

import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; //Solid icons
import { far } from '@fortawesome/free-regular-svg-icons'; // Regular icons
import { fab } from '@fortawesome/free-brands-svg-icons'; // Brand icons

И импортируйте FontAwesomeModule в объявления импорта, чтобы это выглядело так:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})

А затем экспортируйте конструктор библиотеки так...

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas, far, fab);
  }
}

Перейдите к модулю, который вы хотите использовать Font Awesome (например, mypage.module.ts), и импортируйте файл FontAwesomeModule.

Наконец, в вашем HTML, например. mypage.page.html просто использует <fa-icon icon = "home"></fa-icon> для отображения значка.

Если вы столкнетесь с какими-либо проблемами, обязательно сначала остановите Ionic и снова запустите ionic serve, так как это должно перекомпилировать фреймворк.

Также взгляните на https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md для получения полного списка функций, доступных при его использовании.