В этой статье я покажу вам, как реализовать библиотеку 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. Заинтересованы? Оставьте свой емейл здесь.
Не стесняйтесь использовать область комментариев, если у вас есть вопросы, я буду рад помочь или направить вас.