web-dev-qa-db-ja.com

Font Awesome 5およびAngular 5

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で機能していますが、各アイコンを1つずつインポートしたくありません。以前のバージョンで行っていたようにそれらを使用する方法はありますか？それらを1つずつインポートしない方法はありますか？

ありがとう

angularangular5font-awesomefont-awesome-5
7
Valentine

インストール

npm install --save @fortawesome/fontawesome-free

.angular-cliで使用

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

参照： パッケージマネージャーの使用

9
Diego Salguero

はい、すべてインポートして追加できます

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

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

ただし

アイコンスタイル全体をインポートすることもできます。しかし、注意してください！このアイコンのインポート方法はツリーシェーキングをサポートしていないため、インポートされたパッケージのすべてのアイコンはバンドルになります。

また、angular-fontawesomeを使用しているため、それを使用します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FontAwesomeModule],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // Add an icon to the library for convenient access in other components
    library.addIcons(faCoffee);
  }
}

およびhtml

<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

公式ドキュメントから取得したすべてのコード

3
chris p bacon

Index.htmlでCSS URLを設定する必要があります

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

これが実際の例です：

Stackblitzの例=> font-awesome

0
Sanoj_V

これをangular 8バージョンで使用しています。完全に機能しています。この簡単な手順に従ってください。

  1. 最初にangular cliでインストールします

    npm install --save @ fortawesome/fontawesome-free

  2. Angular.jsonを開き、次のようにcssファイルを更新します

    「スタイル」：[「styles.css」、「node_modules/@fortawesome/fontawesome-free/css/all.css」]

  3. サーバーを再起動します

たとえば、追加方法

<i class="fas fa-paper-plane"></i>

ハッピーコーディング:)

その他の素晴らしいフォントのアイコン

0
Anand Raja