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

问题描述

我使用的是角7.0.1和角材质7.0.2，我想添加真棒字体5.4.2图标，并尝试按照fontawesome网站上的步骤操作，但是我无法获得真棒字体图标字体.

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屋！