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>
しかし、これにより、円の中に点滅する疑問符が表示されます。
次の2つのオプションがあります。
githubページ の指示に従ってください。
関連するすべての npm packages がインストールされていることを確認してください。
Proパッケージの場合は、 this を確認してください。
関連するアイコンをインポートします。
import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
グローバルスコープ内のfontawesome
ライブラリにアイコンを追加します(コンポーネントのコンストラクター内ではありません):
fontawesome.library.add(faChevronLeft, faChevronRight);
HTMLで使用します。
<span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>
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
を配置できません。
さらに読む:
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;
}
}
`