web-dev-qa-db-ja.com

Fontawesomeからすべてのアイコンをインポートする

AngularプロジェクトでこのようにFontawesome 5を使用しています：

import fontawesome from '@fortawesome/fontawesome';
import { faBold, faItalic, faUnderline } from '@fortawesome/fontawesome-free-solid';

そしてcontructorで：

fontawesome.library.add(faBold, faItalic, faUnderline)

しかし、各アイコンを個別にインポートするのは非常に愚かです。どういうわけか、一度にすべてのアイコンをインポートできますか？

更新：import * as icons ... 動作しません。

angularfont-awesomefont-awesome-5angular-fontawesome
10
Vladimir Humeniuk
import { fas } from '@fortawesome/fontawesome-free-solid';

その後

fontawesome.library.add(fas)

他のスタイルも同じ

import { fab } from '@fortawesome/fontawesome-free-brands';
import { far } from '@fortawesome/fontawesome-free-regular';
...
fontawesome.library.add( fab, far );
17
sr9yar

フォントをアセットとしてロードしないのですか（アセットフォルダーにファイルを追加し、cssファイルでフォントを定義します）？これで、すべての文字（アイコン）を使用できます。

1
August

Font Awesome 5 in Angular 8 based app これが私のやり方です、私は最初にフォントの素晴らしいパッケージをアプリモジュールにインポートします：

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

FontAwesomeModuleをimportsセクションにもインポートします。

アプリモジュールのコンストラクタに次を追加します。

 constructor(){
    library.add(fab, far, fas);
  }

これで、次のマークアップの例のように、コンポーネント内からFont Awesomeアイコンを参照できます。

    <div class="crop"
     (click)="onClick()"
     [style.width.px]="starWidth"
     [title]="rating">
  <div style="width: 75px">
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
  </div>
</div>

「fas」ライブラリの無地のアイコンを使用しない場合は、通常のアイコンの「far」など、Font Awesomeアイコンライブラリのタイプを指定する必要があります。

私は次のnpmパッケージを使用することになりました： "@ fortawesome/angular-fontawesome"： "^ 0.3.0"、 "@ fortawesome/fontawesome-svg-core"： "^ 1.2.21"、 "@ fortawesome/free- brands-svg-icons "：" ^ 5.10.1 "、" @ fortawesome/free-regular-svg-icons "：" ^ 5.10.1 "、" @ fortawesome/free-solid-svg-icons "：" ^ 5.10 .1 "、

注：angular-fontawesomeパッケージのバージョン0.3.0にダウングレードしました。

Angular 8。

1
Tore Aurstad

docs ここにあるように、あなたはすることができます

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';

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

export class AppModule {

constructor(library: FaIconLibrary) {
  library.addIconPacks(fas, far);
  }
}
0
Arun Kumar A.J