Hello Devs,

In this tutorial, we are going to learn how to add font awesome icons in angular 10.

Icons is a basic requirement of each project. Icons also make beautiful layout of our application. 

Follow this step by step guide given below:




Create New App

ng new my-new-app

Install font-awesome

npm install font-awesome --save



Import CSS

angular.json

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "appFont": {

      ....

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ],

            "styles": [

              "node_modules/font-awesome/css/font-awesome.css",

              "src/styles.css"

            ],

      ......

 If the above code is not working then use this:

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "appFont": {

      ....

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ],

            "styles": [

              "../node_modules/font-awesome/css/font-awesome.css",

              "src/styles.css"

            ],

      ......



Use Font Awesome Icons

src/app/app.component.html

<h1>Angular 10 Install Font Awesome Icons Example - Rahtorji.in</h1>

   

<i class="fa fa-user fa-5x"></i>

<i class="fa fa-dashboard fa-5x"></i>

<i class="fa fa-money fa-5x"></i>

<i class="fa fa-home fa-5x"></i>

<i class="fa fa-th fa-5x"></i>


I hope this example helps you.