font-awesome-5 - 在角材料 7 上使用 font awesome 5

Question

我正在使用 angular 7.0.1 和 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

Answer 1

这就是我所做的，它对我有用：

在我的styles.scss中我有

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

然后我有

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

使用 scss 它也对我不起作用。