Как добавить шрифт Awesome в Ionic 4 - PullRequest
Новая
       23

Как добавить шрифт Awesome в Ionic 4

0 голосов
/ 23 января 2019

Существует множество учебных пособий и статей о том, как включить Font Awesome в проект Ionic 3, но я изо всех сил пытался найти какой-либо способ добавления Font Awesome в проект Ionic 4.Так что возникает вопрос: как добавить и использовать Font Awesome в проекте Ionic 4?

Я попытался использовать следующий учебник без особого успеха.Я попытался выполнить действия, описанные в следующем ответе StackOverflow , который тоже не сработал.

Ответы [ 3 ]

0 голосов
/ 24 января 2019

На всякий случай, если кто-то имеет дело с FontAwesome PRO. Я недавно купил иконки FontAwesome pro и интегрировал их так:

  • скопируйте папку FontAwesome webfonts в 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

0 голосов
/ 15 августа 2019

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

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

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

{
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
}
0 голосов
/ 23 января 2019

Чтобы заставить 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.

...