web-dev-qa-db-ja.com

Angularを使用したFont Awesome 5

font-awesome5 をAngular（2+）で使用するにはどうすればよいですか？

私はこれをコンポーネント内に追加しようとしました：

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

そして、HTMLで：

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

しかし、これにより、円の中に点滅する疑問符が表示されます。

angularfont-awesomefont-awesome-5angular-fontawesome
34
JeB

次の2つのオプションがあります。

1. angle-fontawesomeライブラリを使用する

githubページ の指示に従ってください。

2. fontawesome 5を直接使用する

関連するすべての npm packages がインストールされていることを確認してください。
Proパッケージの場合は、 this を確認してください。

  1. 関連するアイコンをインポートします。

    import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

  2. グローバルスコープ内のfontawesomeライブラリにアイコンを追加します（コンポーネントのコンストラクター内ではありません）：

    fontawesome.library.add(faChevronLeft, faChevronRight);

  3. HTMLで使用します。

    <span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

  4. Htmlのプレフィックスに注意してください。

    • fas for fontawesome-free-solidアイコン（faでも機能します）

      <span class="fas fa-chevron-left"></span>

    • fab for fontawesome-free-brandsアイコン

      <span class="fab fa-bitcoin"></span>

    • far for fontawesome-free-regularアイコン

      <span class="far fa-chevron-left"></span>

    • fal for fontawesome-free-lightアイコン（pro）

      <span class="fal fa-chevron-left"></span>

重要な注意：

変数を使用してfontawesomeクラスを定義するのは、一度だけ（初期化時に）完了したらすぐに問題ありません。ただし、変数の値が変更されても、htmlには反映されません。この例を考えてみましょう：

<span class="fas fa-chevron-{{direction}}"></span>

これにより、初期化時に正しいアイコンが配置されますが、その後方向が変更されても反映されません。
この理由は、fontawesome 5がfa ...でクラス化された要素を適切なsvgに置き換え、置き換えられると変数がこれに影響を与えないためです。
上記のhtmlにランタイムの変更を反映させたい場合は、次のように変更する必要があります。

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

外側のspanは、内側のspanがsvgに置き換えられるために必要です。そのため、*ngIfを配置できません。

さらに読む：

62
JeB

AngularでFont Awesome 5を使用しています

これはHTMLコードです

<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>

これは私のコンポーネントです

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
isFavorite: boolean;
  prefix:string;
  constructor() { }    
  ngOnInit() { }

  onClick(){
    this.isFavorite = !this.isFavorite;    
  }
}
`
2
Meisam Mofidi