在Angular7中将Font Awesome集成到Angular Material中

由大津修一撰写

视频解说（中文）

视频解读（英文）

---

使用Angular Material整合Font Awesome。

我之前介绍了在Angular5中使用Font Awesome的方法，但由于Angular环境已经有了很大的变化，所以这次我将介绍在Angular7中使用Font Awesome的方法。

我认为在Angular中，经常会使用Angular Material。

在Angular Material中，您可以使用mat-icon，但遗憾的是可用的图标种类并不多。因此，考虑同时使用Angular Material和Font Awesome的方法。

很幸运，小山纯先生已经在他的博客《使用Angular Material6和Font Awesome显示图标》（https://blog.tagbangers.co.jp/2018/09/05/font-awesome-angular-material）中分享了这种方法，我决定根据他介绍的步骤来进行引入。

---

安装 Angular Material。

首先，需要在Angular7中安装Angular Material。

在访问所用的项目目录后，输入命令”code .”打开Visual Studio Code。

然后在终端窗口中，

ng add @angular/material 可以被翻译为：”ng 添加 @angular/material”。

输入。
然后，会要求选择内置主题，在这里我们选择默认的indigo-pink主题。

在询问是否安装HammerJS时，请选择“Yes”。

然后安装将会开始。

安装Font Awesome

接下来，使用npm安装Font Awesome。

安装@fortawesome/fontawesome-free

输入。

请注意拼写。@符号后面的字母是

字火箭

不是, 而是

强大的堡垒

是的。

在style.scss中导入Font Awesome

接下来，打开src目录中的style.scss文件，并插入导入语句。

@import “~@fortawesome/fontawesome-free/css/all.css”;
请导入“~@fortawesome/fontawesome-free/css/all.css”文件。

输入该信息。

编辑HTML文件

接下来，我们将进行HTML文件的编辑。

我們將在這裡進行登入頁面的編輯。

首先，使用 mat-button 进行按钮设置。然后，在其中插入 Font Awesome 图标。

只需在mat-icon的设置中，设置Font Awesome的fontset和fontIcon。

我在这里设置了Google的图标。

修改app.module.ts

需要提前导入Angular Material模块，以确保能够按照这个样式显示。

打开app.module.ts文件，在这里导入要使用的MatIconModule和MatButtonModule。

显示谷歌图标

接下来我将在浏览器中尝试显示相关页面。

谷歌的图标已经显示出来了。

显示Twitter图标

接下来，让我们尝试展示Twitter图标。

在之前，需要确认该图标的字体集和图标名称。

首先，打开 Font Awesome 的官网。

这个链接是

是的。

在这个搜索框中，输入”Twitter”。

从这个搜索结果的图标中选择想使用的图标，并单击。

然后将显示HTML文本，点击该部分并复制到剪贴板中。

返回VS Code，并继续编辑HTML。

复制Google的内容并修改为Twitter的格式。

将确认过的字体图标名称更改。

---

我会在浏览器中确认。

好的。

Facebook图标的显示。

同样，显示Facebook的图标。

我打算在Font Awesome的网站上使用Facebook进行搜索。

选择目标图标，并将图标名称复制到剪贴板中。

---

回到VS Code，继续编辑HTML。

将Twitter上的内容复制并转换为Facebook使用。

---

当使用浏览器进行确认时，颜色与Twitter的颜色一样，因此将其进行更改。

将颜色从primary更改为warn。

显示GitHub图标

显示GitHub的图标。

我在Font Awesome的网站上尝试在GitHub上进行搜索。

选择所需的图标，并将图标名称复制到剪贴板中。

---

回到VS Code，并继续编辑HTML。

将Facebook的内容复制并修改为适用于GitHub。

---

我会在浏览器上确认一下。

可以的。

原始文件

登录.html

<p>
  sign-in works!
</p>

<button (click)= "loginWithGoogle()" mat-raised-button color="accent">
  <mat-icon fontSet="fab" fontIcon="fa-google" inline></mat-icon>
  Google
</button>

<button (click)= "loginWithTwitter()" mat-raised-button color="primary">
  <mat-icon fontSet="fab" fontIcon="fa-twitter" inline></mat-icon>
  Twitter
</button>


<button (click)= "loginWithFacebook()" mat-raised-button color="warn">
  <mat-icon fontSet="fab" fontIcon="fa-facebook-f" inline></mat-icon>
  Facebook
</button>


<button (click)= "loginWithGithub()" mat-raised-button color="link">
  <mat-icon fontSet="fab" fontIcon="fa-github" inline></mat-icon>
  Github
</button>

参考资料

• “Angular Material6でFont Awesomeを利用してアイコンを表示する”,

 

• https://blog.tagbangers.co.jp/2018/09/05/font-awesome-angular-material

 

• “Angular5, Angular6, Angular7 Custom Library: Step-by-step guide”,

 

• https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/

 

• “Angular5, Angular6, Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド”,

 

https://www.udemy.com/angular5-l/