在角度材料 7 上使用字体真棒 5 [英] Use font awesome 5 on angular material 7

问题描述

我正在使用 angular 7.0.1 和 angular material 7.0.2，我想添加字体真棒 5.4.2 图标，我正在尝试按照 fontawesome web 上的步骤操作，但我无法获得真棒字体图标字体.

I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font.

首先:

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

然后在styles.scss中添加:

then in styles.scss add:

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

并在 _variables.scss 中添加:

and in _variables.scss add:

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

现在在 app.component.ts 添加:

now in app.component.ts add:

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

[...]

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

最后我想打印字体真棒图标:

and finally I'm suposed to print the font awesome icons with:

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

但是字体真棒图标字体永远不会打印.我遗漏了一些重要且明显的东西，但现在我没有看到.

But the font awesome icon font is never printed. I'm missing something important and obvious but right now I'm not seeing it.

推荐答案

这是我所做的并且对我有用:

This is what I've done and it works for me:

在我的styles.scss中

In my styles.scss I have

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

那我有

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

使用 scss 也对我不起作用.

With scss it didnt work for me either.

这篇关于在角度材料 7 上使用字体真棒 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！