web-dev-qa-db-ja.com

angular material 7でフォントawesome 5を使用

angular 7.0.1 and angular material 7.0.2、素晴らしい5.4.2アイコンを追加したいので、 fontawesome webの手順に従いますが、フォントの素晴らしいアイコンフォントを取得できません。

最初：

npm install --save-dev @fortawesome/fontawesome-free

次に、styles.scssに以下を追加します。

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

_variables.scssに以下を追加します。

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

今app.component.tsに追加します：

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

そして最後に、フォントの素晴らしいアイコンを印刷することになっています：

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

しかし、素晴らしいフォントのフォントは決して印刷されません。私は重要で明白な何かを見逃していますが、今は見ていません。

font-awesome-5icon-fontsangular7angular-material-7
8
Alex

これは私がやったことであり、私にとってはうまくいきます：

私のstyles.scssには

@import "~@fortawesome/fontawesome-free/css/all.css";

で、〜がある

<mat-icon fontSet="fa" fontIcon="fa-clipboard-check"></mat-icon>

Scssでは、私にとってもうまくいきませんでした。

19
Gabb1995

Scssを使用する場合は、vendor.scssにスタイルをインポートするだけです。

$fa-font-path: "~@fontawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

そして、通常どおり使用します。

<span class="fab fa-refresh fa-spin fa-github" aria-hidden="true"></spin>

ネームスペース、fabブランド、fasソリッドなどに注意してください。

それは私にとって最高の選択肢でした。

または、 angular-fontawesome libraryを使用できます。

4
Tim

私は以下の簡単な手順に従いましたが、インストールするのに役立ちますfont awesome 5.6.3（無料版）in myAngular 7プロジェクト。

以下のコマンドを実行して、フォントの素晴らしい最新バージョンをインストールします。

npm install --save-dev @fortawesome/fontawesome-free

Angular.jsonファイルにファイルパスを追加します。

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

参照： https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

すべてが..これが役立つことを願って..

4
Karthi Coimbatore
    <fa-icon icon="fa-clipboard-check"></fa-icon>

FontAwesomeModuleがコンポーネントのコンテナモジュールにインポートされていることを確認してください。

Svgが必要な場合：

    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    import { library } from '@fortawesome/fontawesome-svg-core';
    import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons';
    library.add(faClipboardCheck);
0
Wildhammer