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

2 年 ago

科, 雅

2 minutes

将Font Awesome与Angular Material集成到Angular8中。

由大津修一撰写

undefined

以下是日本語视频解说的中文简述：

视频解说的链接是：https://youtu.be/EOm-kaKMm3U。

视频解说（英语）:

完整的源代码
https://github.com/Ohtsu/ng8-mat-font-awesome

将Font Awesome集成到Angular Material中

我认为在Angular中，多数情况下都会使用Angular Material。

然而，在Angular Material中，虽然可以使用mat-icon，但不幸的是，它的种类并不多。因此，在使用Angular Material的同时，考虑使用Font Awesome的方法。

我之前在 Angular 7 中将 Font Awesome 集成到 Angular Material 中进行了介绍（链接：https://qiita.com/SOhtsu/items/77ffb011833264d452a7），但是由于最新发布了 Angular 8，我尝试了相同的配置，结果发现出现了错误。

所以这次我们将介绍在Angular8中使用Font Awesome的方法。

使用Angular8创建一个新项目。

首先，使用Angular8创建一个新的项目。

在这里，

输入命令 “ng new ng8MatFontAwesome”。

ng8MatFontAwesome是一个项目名称，这个名称是任意的。

这个过程需要一些时间。

undefined

启动 Visual Studio Code

进入接下来创建的项目目录后，键入”code .”，打开Visual Studio Code。

接下来，按下Ctrl + ‘@’键，在Visual Studio Code中打开终端窗口。

undefined

安装Angular Material

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

在终端窗口中，

ng add @angular/material 可以改写为：添加 @angular/material

输入 “と”。

undefined

然后，需要选择一个内置的主题，这里我们选择默认的indigo-pink主题。

undefined

在安装HammerJS之前，选择“是”选项。

然后，对于是否使用动画，选择“是”。

undefined

然后安装将开始。

安装 Font Awesome

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

请用中文原生语言解释以下内容，只需要一种选项：
npm i @fortawesome/fontawesome-free

安装 @fortawesome/fontawesome-free

输入。

undefined

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

字库

与其。。。不如

厉害

是的。

使用Angular.json导入Font Awesome库。

接下来，打开项目根目录中的angular.json文件，插入导入语句。

“./node_modules/@fortawesome/fontawesome-free/css/all.min.css” 可以被简写为 “./fontawesome/fontawesome.min.css”。

在中文中，将其添加如下。


 "projects": {
    "ng8MatFontAwesome": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng8MatFontAwesome",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/styles.scss"

undefined

确认本地服务器的启动

在这里，我们首先需要确认本地服务器是否已经启动。

在终端窗口中

输入 ng s -o。

undefined

浏览器会自动打开。

undefined

好的。 de.)

修改app.module.ts

为了使用Angular Material的按钮等，需要先导入Angular Material的模块。

打开app.module.ts文件，在此处导入MatIconModule和MatButtonModule以便使用。

undefined

undefined

编辑HTML文件

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

打开 src/app 中的 app.component.html 文件。该文件定义了默认的首页。

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

只需在mat-icon的配置中设置Font Awesome的字体集和字体图标。

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

undefined

展示Google图标

接下来，我将启动本地服务器并尝试显示相应的页面。

undefined

谷歌的图标正在显示。

undefined

在推特上显示的图标

以下是显示Twitter图标的下一个步骤。

回到VS Code，继续编辑HTML。

复制 Google 的内容，并进行修改以适用于 Twitter。

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

undefined

undefined

我会在浏览器上进行确认。

可以。

展示Facebook图标

以同样的方式显示Facebook的图标。

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

首先，打开Font Awesome的网站。

这个URL是

是。

undefined

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

在这个搜索框里，输入”Facebook”。

undefined

从此搜索结果的图标中选择想要使用的图标，并点击。

undefined

当你这样做时，将会显示HTML文本，然后点击相应部分并将其复制到剪贴板上。

undefined

回到VS Code，再次编辑HTML。

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

undefined

接下来，我们将更改显示颜色。

undefined

我会在浏览器上确认。

undefined

显示 GitHub 图标

同样，显示GitHub的图标。

我們回到 VS Code，繼續編輯 HTML。

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

undefined

接下来，我们将更改显示颜色。

undefined

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

undefined

好的。

最后，我们会注释掉不需要显示的默认页面部分。

undefined

我会在浏览器上进行确认。

undefined

没问题。

原始文件

请提供以下内容的中文本地化释义。

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

✖

将在 10 秒后关闭

bannerAds