В этой статье я покажу вам, как реализовать библиотеку Font-Awesome в вашем приложении Ionic 5. Это руководство предназначено для новичков, поэтому мы действительно рассмотрим все, от создания приложения до отображения в нем наших красивых иконок Font-Awesome.

1. Создание приложения Ionic 5

Прежде всего, давайте создадим наше приложение Ionic, в которое позже мы интегрируем библиотеку Font-Awesome. Если у вас уже есть созданное приложение, конечно, вы можете просто пропустить этот шаг.

Мы создадим пустое приложение, чтобы нас не отвлекало меню или вкладка. Для этого достаточно выполнить эту команду:

ionic start FontAwesomeTutorial blank

Выберите «Angular» в качестве используемой платформы и «Да» для Capacitor, чтобы настроить таргетинг на собственные устройства Android и iOS.

Затем выполните эту команду, чтобы убедиться, что ваше пустое приложение работает:

cd FontAwesomeTutorial 
ionic serve

Если все работает, ваше приложение должно отображаться в новой вкладке в браузере по умолчанию.

Теперь вы можете открыть папку своего проекта в предпочитаемом вами редакторе кода. В моем случае это Visual Studio Code.

Идеально! Давайте сейчас интегрируем Font-Awesome.

2. Интеграция Font-Awesome

Давайте углубимся в основную часть этой статьи: интеграцию Font-Awesome. Самое первое, что нужно сделать, - это установить библиотеку Font-Awesome, включая различные пакеты значков , с помощью npm.

Убедитесь, что вы все еще находитесь в папке проекта Ionic, и выполните следующие команды:

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

Если все в порядке, мы можем импортировать их в наш проект. Для этого откройте файл src / app / app.module.ts в редакторе кода и добавьте эти строки под уже существующими импортированными файлами:

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

Это фактически говорит Ionic, что вы хотите использовать библиотеку Font-Awesome в своем проекте.

Теперь нам нужно убедиться, что эти библиотеки добавлены в наш класс AppModule: мы можем сделать это, добавив конструктор, который будет ссылаться на FaIconLibrary:

И, наконец, для этого файла не забудьте импортировать FontAwesomeModule после AppRoutingModule, вот так:

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule]

Если вы до сих пор внимательно следили за этой статьей, ваш файл app.module.ts теперь должен выглядеть следующим образом:

Мы закончили с app.module.ts. Теперь давайте действительно будем использовать FontAwesome на наших страницах!

Если вы начали новый проект, как я, по умолчанию у вас должна быть создана «домашняя» страница. Мы будем использовать его, чтобы показать ваши значки Font-Awesome.

Сначала давайте импортируем библиотеку в модуль нашей страницы, в файл src / app / home / home.module.ts.

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

… И добавьте его в список NgModules, например, после IonicModule:

Хороший. Наконец-то мы можем написать HTML с некоторыми иконками Font-Awesome!

Откройте файл src / app / home / home.page.html и используйте этот HTML-тег для вызова своих значков:

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

Конечно, вы можете заменить дом на нужное вам имя значка из списка бесплатных значков на Font Awesome.

Теперь, если вы снова выполните свой проект, используя:

ionic serve

… Вот что вы должны увидеть:

Вот и все! Теперь вы можете использовать любой значок Font Awesome в своем проекте Ionic 5! Код этого полного Ionic-проекта доступен на GitHub.

Надеюсь, эта статья была для вас полезной. Если это так, не стесняйтесь «аплодировать» этой статьей и делиться ею со своими коллегами!

Я даю еще много советов и руководств по Ionic в моем списке рассылки. Если вы подпишетесь, вы будете получать максимум одно электронное письмо в неделю только об Ionic. Заинтересованы? Оставьте свой емейл здесь.

Не стесняйтесь использовать область комментариев, если у вас есть вопросы, я буду рад помочь или направить вас.