Tôi đang sử dụng Angular 2+ và Angular CLI.

Làm cách nào để thêm phông chữ tuyệt vời vào dự án của tôi?

Sau bản phát hành cuối cùng của Angular 2.0, cấu trúc của dự án Angular2 CLI đã được thay đổi - bạn không cần bất kỳ tệp nhà cung cấp nào, không có system.js - chỉ có gói web. Bạn cũng vậy:

1. npm install font-awesome --save

2. Trong angular-cli.jsontệp định vị styles[]mảng và thêm thư mục tham chiếu phông chữ tuyệt vời ở đây, như dưới đây:

   "apps": [
       {
         "root": "src",
         "outDir": "dist",
         ....
         "styles": [
             "styles.css",
             "../node_modules/bootstrap/dist/css/bootstrap.css",
             "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
         ],
         ...
     }
     ]
   ],
   

   Trong các phiên bản gần đây hơn của Angular, sử dụng angular.jsontệp thay thế mà không có ../. Ví dụ, sử dụng "node_modules/font-awesome/css/font-awesome.css".

3. Đặt một số biểu tượng phông chữ tuyệt vời trong bất kỳ tệp html nào bạn muốn:

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

4. Dừng ứng dụng Ctrl+ csau đó chạy lại ứng dụng bằngng serve trình theo dõi chỉ dành cho thư mục src và angular-cli.json không được quan sát để thay đổi.

5. Thưởng thức các biểu tượng tuyệt vời của bạn!

Nếu bạn đang sử dụng SASS, bạn chỉ có thể cài đặt nó qua npm

npm install font-awesome --save

và nhập nó trong của bạn /src/styles.scssvới:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

Mẹo: Bất cứ khi nào có thể, tránh gây rối với angular-clicơ sở hạ tầng. ;)

Câu trả lời hàng đầu là một chút lỗi thời và có một cách dễ dàng hơn một chút.

1. cài đặt qua npm

   npm install font-awesome --save

2. trong của bạn style.css:

   @import '~font-awesome/css/font-awesome.css';

   hoặc trong style.scss:

   $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';

   Chỉnh sửa: như đã lưu ý trong các nhận xét, dòng cho phông chữ phải được thay đổi trên các phiên bản mới hơn thành$fa-font-path: "../../../node_modules/font-awesome/fonts";

sử dụng ~sẽ làm cho sass nhìn vàonode_module . Tốt hơn là làm theo cách này hơn là với đường dẫn tương đối. Lý do là nếu bạn tải lên một thành phần vào npm và bạn nhập phông chữ tuyệt vời bên trong scss thành phần thì nó sẽ hoạt động đúng với ~ và không phải với đường dẫn tương đối sẽ sai ở điểm đó.

Phương pháp này hoạt động cho bất kỳ mô-đun npm có chứa css. Nó hoạt động cho scss là tốt. Tuy nhiên nếu bạn đang nhập css vào style.scss thì nó sẽ không hoạt động (và có thể ngược lại). Đây là lý do tại sao

Có 3 phần để sử dụng Font-Awesome trong các dự án góc

1. Cài đặt
2. Tạo kiểu (CSS / SCSS)
3. Sử dụng trong Angular

Cài đặt

Cài đặt từ NPM và lưu vào gói.json của bạn

npm install --save font-awesome

Tạo kiểu Nếu sử dụng CSS

Chèn vào style.css của bạn

@import '~font-awesome/css/font-awesome.css';

Tạo kiểu Nếu sử dụng SCSS

Chèn vào style.scss của bạn

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Sử dụng với Angular 2.4+ 4+ đơn giản

<i class="fa fa-area-chart"></i>

Sử dụng với vật liệu góc

Trong app.module.ts của bạn sửa đổi hàm tạo để sử dụng MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

và thêm MatIconModulevào @NgModulenhập khẩu của bạn

@NgModule({
  imports: [
    MatIconModule,
    ....
  ],
  declarations: ....

}

Bây giờ trong bất kỳ tệp mẫu nào bạn có thể làm

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

CẬP NHẬT Tháng 2 năm 2020: gói
fortawgie hiện hỗ trợ ng addnhưng nó chỉ khả dụng cho góc 9 :

ng add @fortawesome/angular-fontawesome

CẬP NHẬT ngày 8 tháng 10 năm 2019:

Bạn có thể sử dụng gói mới https://www.npmjs.com/package/@fortawclaw/angular-fontawemme

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

Thêm FontAwesomeModulevào nhập khẩu trong 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 { }

Buộc biểu tượng vào thuộc tính trong thành phần của bạn 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;
}

Sử dụng biểu tượng trong mẫu src/app/app.component.html:

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

TRẢ LỜI GỐC:

Lựa chọn 1:

Bạn có thể sử dụng mô-đun npm angular-font-awesome

npm install --save font-awesome angular-font-awesome

Nhập mô-đun:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Nếu bạn đang sử dụng Angular CLI, hãy thêm CSS tuyệt vời vào các kiểu bên trong angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

LƯU Ý: Nếu sử dụng bộ xử lý trước SCSS, chỉ cần thay đổi css cho scss

Ví dụ sử dụng:

<fa name="cog" animation="spin"></fa>

Optoin 2:

Có một câu chuyện chính thức cho bây giờ

Cài đặt thư viện tuyệt vời về phông chữ và thêm phụ thuộc vào package.json

npm install --save font-awesome

Sử dụng CSS

Để thêm các biểu tượng CSS Awesome CSS vào ứng dụng của bạn ...

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Sử dụng SASS

Tạo một tập tin trống _variables.scsstrongsrc/ .

Thêm vào đây _variables.scss :

$fa-font-path : '../node_modules/font-awesome/fonts'; Trong styles.scssthêm những điều sau đây:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Kiểm tra

Chạy ng phục vụ để chạy ứng dụng của bạn trong chế độ phát triển và điều hướng đến http: // localhost: 4200 .

Để xác minh Font Awesome đã được thiết lập chính xác, hãy thay đổi src/app/app.component.htmlthành ...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

Sau khi lưu tệp này, quay lại trình duyệt để xem biểu tượng Phông chữ tuyệt vời bên cạnh tiêu đề ứng dụng.

Ngoài ra, có một câu hỏi liên quan Angular CLI xuất ra các tệp phông chữ tuyệt vời, gốc của disti vì mặc định cli góc sẽ xuất các phông chữ vào distgốc, đây không phải là vấn đề.

Với Angular2RC5 và angular-cli 1.0.0-beta.11-webpack.8bạn có thể đạt được điều này với nhập khẩu css.

Chỉ cần cài đặt phông chữ tuyệt vời:

npm install font-awesome --save

và sau đó nhập phông chữ tuyệt vời vào một trong các tệp kiểu được định cấu hình của bạn:

@import '../node_modules/font-awesome/css/font-awesome.css';

(tập tin kiểu được cấu hình trong angular-cli.json)

Tôi nghĩ rằng tôi sẽ giải quyết vấn đề này vì font-awesome hiện được cài đặt khác nhau theo tài liệu của họ.

npm install --save-dev @fortawesome/fontawesome-free

Tại sao nó là fortawgie bây giờ thoát khỏi tôi nhưng nghĩ rằng tôi sẽ gắn bó với phiên bản mới nhất thay vì quay lại với phông chữ cũ - tuyệt vời.

Sau đó, tôi nhập nó vào scss của tôi

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

Hi vọng điêu nay co ich

Nhiều hướng dẫn trên công việc, tôi đề nghị nhìn vào những. Tuy nhiên, một điều cần lưu ý:

Sử dụng <i class="fas fa-coffee"></i> không hiệu quả trong dự án của tôi (dự án thực hành mới chỉ một tuần tuổi) sau khi cài đặt và biểu tượng mẫu ở đây cũng được sao chép vào bảng tạm từ Font Awesome trong tuần qua.

Điều này <i class="fa fa-coffee"></i> không hoạt động . Nếu sau khi cài đặt Font Awesome trên dự án của bạn, nó vẫn chưa hoạt động, tôi khuyên bạn nên kiểm tra lớp trên biểu tượng của bạn để xóa 's' để xem nó có hoạt động không.

Có rất nhiều câu trả lời tốt ở đây. Nhưng nếu bạn đã thử tất cả chúng và vẫn nhận được các hình vuông thay vì các biểu tượng fontawgie, hãy kiểm tra quy tắc css của bạn. Trong trường hợp của tôi, tôi đã có quy tắc sau:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

Và nó ghi đè phông chữ fontawgie. Chỉ cần thay thế *bộ chọn để bodygiải quyết vấn đề của tôi:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

Đối với góc 6,

Đầu tiên npm install font-awesome --save

Thêm node_modules/font-awesome/css/font-awesome.cssvào angular.json .

Hãy nhớ không thêm bất kỳ dấu chấm nào ở phía trước node_modules/.

Bài đăng này mô tả cách tích hợp Fontawgie 5 vào Angular 6 (Angular 5 và các phiên bản trước cũng sẽ hoạt động, nhưng sau đó bạn phải điều chỉnh các bài viết của tôi)

Tùy chọn 1: Thêm tệp css

Pro: Mọi biểu tượng sẽ được bao gồm

Contra: Mọi biểu tượng sẽ được bao gồm (kích thước ứng dụng lớn hơn vì tất cả các phông chữ được bao gồm)

Thêm gói sau:

npm install @fortawesome/fontawesome-free-webfonts

Sau đó, thêm các dòng sau vào angular.json của bạn:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

Cách 2: Gói góc

Pro: Kích thước ứng dụng nhỏ hơn

Contra: Bạn phải bao gồm mọi biểu tượng bạn muốn sử dụng riêng biệt

Sử dụng gói FontAwgie 5 Angular:

npm install @fortawesome/angular-fontawesome

Chỉ cần làm theo tài liệu của họ để thêm các biểu tượng. Họ sử dụng các biểu tượng svg, vì vậy bạn chỉ cần thêm các biểu tượng / biểu tượng, bạn thực sự sử dụng.

Sau một số thử nghiệm, tôi đã có được công việc sau:

1. Cài đặt với npm:

   npm install font-awesome --save
   

2. thêm vào tệp angular-cli-build.js :

   vendorNpmFiles : [
       font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
   ]
   

3. thêm vào index.html

   <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
   

Chìa khóa là bao gồm các loại tệp phông chữ trong tệp angular-cli-build.js

. + (css | css.map | otf | eot | svg | ttf | woff | woff2)

Câu trả lời được chấp nhận là lỗi thời.

Dành cho góc 9 và Fontawgie 5

1. Cài đặt FontAwgie

   npm cài đặt @ fortawgie / fontawgie-free --save

2. Đăng ký nó trên angular.json theo phong cách

   "node_modules/@fortawgie/fontawgie-free/css/all.min.css"

3. Sử dụng nó trên ứng dụng của bạn

Chỉnh sửa: Tôi đang sử dụng góc ^ 4.0.0 và Electron ^ 1.4.3

Nếu bạn gặp sự cố với ElectronJS hoặc tương tự và có lỗi 404, cách khắc phục có thể là khắc phục sự cố của bạn webpack.config.js, bằng cách thêm (và bằng cách giả sử rằng bạn đã cài đặt mô-đun nút tuyệt vời qua npm hoặc trong tệp pack.json) :

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

Lưu ý rằng cấu hình webpack tôi đang sử dụng có src/app/distđầu ra và, trong dist, một assetsthư mục được tạo bởi webpack:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

Về cơ bản, những gì hiện đang xảy ra là:

• Webpack đang sao chép thư mục phông chữ vào thư mục dev property.
• Webpack đang sao chép thư mục tài sản dev vào distthư mục tài sản

Bây giờ, khi quá trình xây dựng kết thúc, ứng dụng sẽ cần tìm .scsstệp và thư mục chứa các biểu tượng, giải quyết chúng đúng cách. Để giải quyết chúng, tôi đã sử dụng điều này trong cấu hình webpack của mình:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

Cuối cùng, trong .scsstệp, tôi đang nhập phông chữ .scss tuyệt vời và xác định đường dẫn của phông chữ, một lần nữa , dist/assets/font-awesome/fonts. Con đường làdist bởi vì trong webpack.config, output.path được đặt làhelpers.root('src/app/dist');

Vì vậy, trong app.scss:

$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

Lưu ý rằng, theo cách này, nó sẽ xác định đường dẫn phông chữ (được sử dụng sau trong tệp .scss) và nhập tệp .scss bằng cách sử dụng ~font-awesomeđể giải quyết đường dẫn tuyệt vời về phông chữ node_modules.

Điều này khá khó khăn, nhưng đó là cách duy nhất tôi tìm thấy để khắc phục sự cố lỗi 404 với Electron.js

Bắt đầu từ https://github.com/AngularClass/angular-starter , sau khi đã thử nghiệm rất nhiều kết hợp cấu hình khác nhau, đây là những gì tôi đã làm để làm cho nó hoạt động với AoT.

Như đã nói nhiều lần, trong tôi app.component.scss:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

Sau đó, trong webpack.config.js (thực sự là webpack.commong.js trong gói khởi động):

Trong phần bổ trợ:

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),

Trong phần quy tắc:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}

Tôi đã lãng phí vài giờ để cố gắng để phiên bản mới nhất của FontAwgie 5.2.0 hoạt động với AngularCLI 6.0.3 và Thiết kế Vật liệu. Tôi đã làm theo hướng dẫn cài đặt npm trên trang web FontAwgie

Tài liệu mới nhất của họ hướng dẫn bạn cài đặt bằng cách sử dụng như sau:

npm install @fortawesome/fontawesome-free

Sau khi lãng phí vài giờ, cuối cùng tôi đã gỡ cài đặt nó và cài đặt phông chữ tuyệt vời bằng cách sử dụng lệnh sau (cài đặt này FontAw đũa v4.7.0):

npm install font-awesome --save

Bây giờ nó hoạt động tốt bằng cách sử dụng:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

Font Awesome cung cấp cho bạn scalablecác biểu tượng vector có thể được tùy chỉnh ngay lập tức kích thước, màu sắc, bóng đổ và bất cứ thứ gì có thể được thực hiện với sức mạnh của CSS.

Tạo một dự án mới và điều hướng vào dự án.

ng new navaApp
cd navaApp

Cài đặt thư viện font-awesome và thêm phụ thuộc vào package.json.

npm install --save font-awesome

Sử dụng CSS

Để thêm các biểu tượng CSS Awesome CSS vào ứng dụng của bạn ...

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

Sử dụng SASS

Tạo dự án mới với SASS:

ng new cli-app --style=scss

Để sử dụng với dự án hiện có với CSS:

Đổi tên src/styles.cssthành src/styles.scss Thay đổi angular.jsonđể tìm kiếm styles.scssthay vì css:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

Hãy chắc chắn để thay đổi styles.cssthành styles.scss.

Tạo một tập tin trống _variables.scsstrongsrc/ .

Thêm vào như sau_variables.scss :

$fa-font-path : '../node_modules/font-awesome/fonts';

Trong styles.scssthêm những điều sau đây:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Bạn có thể sử dụng gói Angular Font Awesome

cài đặt npm --save font-awesome angular-font-awesome

và sau đó nhập vào mô-đun của bạn:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

và nhập kiểu trong tệp angular-cli:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

xem thêm chi tiết về gói trong thư viện npm:

https://www.npmjs.com/package/angular-font-awgie

và sau đó sử dụng nó như thế này:

<i class="fa fa-coffee"></i>

Để sử dụng Font Awesome 5 trong dự án Angular của bạn, hãy chèn mã bên dưới vào tệp src / index.html.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Chúc may mắn!

Đối với fontawgie 5.x + cách đơn giản nhất sẽ là như sau,

cài đặt bằng gói npm: npm install --save @fortawesome/fontawesome-free

Trong styles.scsstập tin của bạn bao gồm:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

Lưu ý: nếu bạn có _variables.scsstệp thì nên bao gồm cả $fa-font-pathbên trong tệp và không có trong styles.scsstệp.

Sử dụng LESS (không phải SCSS) và Angular 2.4.0 và Webpack tiêu chuẩn (không phải Angular CLI, những điều sau đây có hiệu quả với tôi:

npm install --save font-awesome

và (trong app.component.less của tôi):

@import "~font-awesome/less/font-awesome.less";

và tất nhiên bạn có thể cần đoạn mã rõ ràng và trực quan cao này (trong module.loaders trong webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

Trình tải có sẵn để sửa các lỗi webpack

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

và biểu thức chính quy phù hợp với các tham chiếu svg (có hoặc không có đặc tả phiên bản). Tùy thuộc vào thiết lập gói web của bạn, bạn có thể không cần nó hoặc bạn có thể cần một cái gì đó khác.

Thêm nó vào gói.json của bạn dưới dạng "devDependencies" font-awesome: "số phiên bản"

Đi tới Command Prompt gõ lệnh npm mà bạn đã cấu hình.

Tôi muốn sử dụng Font Awesome 5+ và hầu hết các câu trả lời tập trung vào các phiên bản cũ hơn

Đối với Font Awesome 5+ mới, dự án góc cạnh chưa được phát hành, vì vậy nếu bạn muốn sử dụng các ví dụ được đề cập trên trang web tuyệt vời về phông chữ, bạn cần sử dụng một công việc xung quanh. (đặc biệt là fas, lớp xa thay vì lớp fa)

Tôi vừa nhập cdn vào Font Awesome 5 trong style.css của mình. Chỉ cần thêm điều này trong trường hợp nó giúp ai đó tìm thấy câu trả lời nhanh hơn tôi đã làm :-)

Mã trong Style.css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

Nếu vì lý do nào đó bạn không thể cài đặt gói ném npm. Bạn luôn có thể chỉnh sửa index.html và thêm phông chữ CSS tuyệt vời vào đầu. Và sau đó chỉ sử dụng nó trong dự án.

Đối với webpack2 sử dụng:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

thay vì file-loader?name=/assets/fonts/[name].[ext]

Đối với Angular 9 bằng cách sử dụng ng:

ng add @fortawesome/angular-fontawesome@0.6.x

Nhìn vào đây để biết thêm thông tin

Bây giờ có vài cách để cài đặt fontAwgie trên Angular CLI:

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

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

Tham khảo tại đây: https://github.com/FortAwgie/angular-fontawgie