如何將 Fontawesome 添加到 Angular 應用程序並讓圖標出現

Question

我添加了

"@fortawesome/fontawesome-free": "5.15.1"

到我的package.json中的dependencies項，然后我添加到我的 html

<span class="fas fa-sign-in-alt"></span>

但什么也沒有出現。

我需要做什么？ 這完全不清楚。

我在一個由 VisualStudio 創建的項目中，它在package.json中有 Twitter 引導程序，這似乎在沒有引導程序的情況下工作，因為在其他任何地方都沒有提到它，

這行不通。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
  ]
})
export class AppComponent {
  title = 'app';
}

添加到styles.css ：

@import "../node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css";

也不起作用。 這是廢話。

在<head>中添加<link>有什么不好？ 這太可怕了。

Answer 1

將第三方全局styles添加到angular.json

在您的 angular.json 文件中，您將擁有一個用於描述要包含在 webpack 構建中的文件或 glob 的屬性。

{
  "projects": {
    "architect": {
      "build": {
        "styles": [] // add the path here.
      }
    }
  }
}

所以，對於你的字體真棒，它看起來像下面這樣：

"styles": [
   "src/styles.scss",
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
]

修改angular.json后，您必須重新啟動 angular cli 才能使更改生效。

為什么不能直接添加到`index.html`的頭部。

這樣做的原因是，您將分發的 index.html 是由 webpack 一旦您運行ng build生成的，因此您必須采取這個額外的步驟來告訴 Z424516CA53B4AD4BEF37ED04F8795A8Z 工具鏈包含您生成的樣式的頭。

更多信息

有關 Angular 工作區配置的更多信息，您可以在此處查看參考指南： https://angular.io/guide/workspace-config

Answer 2

適用於Angular 9+

您還可以考慮使用angular-fontawesome庫

腳步

安裝依賴項

使用npm

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons

將FontAwesomeModule添加到src/app/app.module.ts中的導入：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

將圖標綁定到組件src/app/app.component.ts中的屬性：

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

使用模板src/app/app.component.html中的圖標：

<fa-icon [icon]="faCoffee"></fa-icon>

如何將 Fontawesome 添加到 Angular 應用程序並讓圖標出現

問題描述

2 個解決方案

解決方案1
1 2020-12-10 02:12:58

將第三方全局styles添加到angular.json

為什么不能直接添加到`index.html`的頭部。

更多信息

解決方案2
-1 2020-12-10 05:09:49

如何將 Fontawesome 添加到 Angular 應用程序並讓圖標出現

問題描述

2 個解決方案

解決方案1 1 2020-12-10 02:12:58

將第三方全局styles添加到angular.json

為什么不能直接添加到index.html的頭部。

更多信息

解決方案2 -1 2020-12-10 05:09:49

解決方案1
1 2020-12-10 02:12:58

為什么不能直接添加到`index.html`的頭部。

解決方案2
-1 2020-12-10 05:09:49