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'
しかし、素晴らしいフォントのフォントは決して印刷されません。私は重要で明白な何かを見逃していますが、今は見ていません。
これは私がやったことであり、私にとってはうまくいきます:
私のstyles.scssには
@import "~@fortawesome/fontawesome-free/css/all.css";
で、〜がある
<mat-icon fontSet="fa" fontIcon="fa-clipboard-check"></mat-icon>
Scssでは、私にとってもうまくいきませんでした。
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を使用できます。
私は以下の簡単な手順に従いましたが、インストールするのに役立ちます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
すべてが..これが役立つことを願って..
<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);