使用Angular导入Font Awesome，以添加现代化的图标

概述

当想要在按钮或屏幕上使用图标时，可以使用一个名为Font Awesome的软件包。以下是安装Font Awesome时的备忘录。

前提条件

• Angular のバージョン： 7.0.1

導入する Font Awesome のバージョン： 5.6.3

操作步骤

安裝

npm i -D @fortawesome/fontawesome-free

在 angular.json 文件中添加内容。

{
...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
...
            "styles": [
              "client/styles.scss",
              // 追加
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [
              // 追加
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ]
          },

...

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
...
            "styles": [
              "client/styles.scss",
              // 追加
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [
              // 追加
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ],
...
        },

...

}

以下是Angular 7的版本。
对于Angular 6及之前的版本，路径会在前面加上”../”，例如：”../node_modules/bootstrap/dist/css/bootstrap.min.css”。（其余修改内容相同）

使用方法

用这种方式使用图标。试着使用Angular标志的字体。

<i class="fab fa-angular"></i>

从画面上可以看出，它出现了。

以上是引入完成。
接下来只需参考官方的”图标列表”选择喜欢的使用。