Font Awesome 5 и Angular 5 - PullRequest
Новая
       11

Font Awesome 5 и Angular 5

0 голосов
/ 05 июля 2018

Я использовал пакет font-awesome npm (версия Font Awesome 4.7), но я хочу обновить его до Font Awesome 5. Я установил следующие пакеты: 

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

Я использовал такие иконки: 

<i class="fa fa-plus"></i>

В новой версии я попытался использовать такие значки: 

<i class="fas fa-sign-out-alt fa-2x"></i>

Но это не работает. Я пытаюсь добавить значки, как это: 

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

в моем app.module.ts, и он работает, но я не хочу импортировать каждый значок один за другим. Есть ли способ использовать их, как я делал с предыдущей версией? Есть способ не импортировать их один за другим?

Спасибо

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

Да, вы можете импортировать и добавить их все 

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far);

Тем не менее

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

Кроме того, поскольку вы используете angular-fontawesome, используйте его ... 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

// Add an icon to the library for convenient access in other components
library.add(faCoffee);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

и в html 

<div style="text-align:center">
  <!-- simple name only that assumes the 'fas' prefix -->
  <fa-icon icon="coffee"></fa-icon>
  <!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
  <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
</div>

Весь код взят с главной страницы официальной документации

0 голосов
/ 06 сентября 2018

Установить 

npm install --save @fortawesome/fontawesome-free

и использовать в .angular-cli 

 "styles": [
    "styles.css",
    "../node_modules/@fortawesome/fontawesome-free/css/all.css",

ссылка: Использование диспетчера пакетов

0 голосов
/ 05 июля 2018

Вам необходимо установить URL CSS в вашем index.html 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

Вот рабочий пример:

Пример Stackblitz => шрифт потрясающий

...