Introduction

In this article I will demonstrate how to install font-awesome in Angular 6. There are two ways to install font-awesome in Angular. If you are new to Angular 6, then please check the below links.

To install font-awesome there are two methods,

Direct using CDN link inthe project Using npm or angular CLI

First Method

Step 1



Open browser type https://cdnjs.com/libraries/font-awesome , copy CSS and Script links.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

<link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >

Step 2

Open the project folder, find scr folder under src folder, open index.html file and paste above CDN links.

<!doctype html> <html lang= "en" > <head> <meta charset= "utf-8" > <title>HelloWorld</title> <base href= "/" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "icon" type= "image/x-icon" href= "favicon.ico" > <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > <link rel= "stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity= "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin= "anonymous" > </head> <body> <app-root></app-root> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin= "anonymous" ></script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity= "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin= "anonymous" ></script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity= "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin= "anonymous" ></script> </body> </html>

Step 3



Open app folder, find app.compponent.html and replace this with the following code.

<div class = "container py-5" > <div class = "card" style= "width: 600px; margin: auto;" > <div class = "card-header bg-primary text-white" > <h4 class = "text-uppercase text-center" >Registration</h4> </div> <div class = "card-body" > <div class = "row" > <div class = "col-sm-6 col-md-6 col-xs-12" > <div class = "form-group" > <label>Fisrt Name:</label> <div class = "input-group" > <div class = "input-group-prepend" > <span class = "input-group-text" > <i class = "fa fa-user" ></i> </span> </div> <input id= "name" type= "text" class = "form-control" > </div> </div> </div> <div class = "col-sm-6 col-md-6 col-xs-12" > <div class = "form-group" > <label>Last Name:</label> <div class = "input-group" > <div class = "input-group-prepend" > <span class = "input-group-text" > <i class = "fa fa-user" ></i> </span> </div> <input id= "name" type= "text" class = "form-control" > </div> </div> </div> </div> <div class = "row" > <div class = "col-sm-6 col-md-6 col-xs-12" > <div class = "form-group" > <label>Phone Number:</label> <div class = "input-group" > <div class = "input-group-prepend" > <span class = "input-group-text" > <i class = "fa fa-phone" ></i> </span> </div> <input id= "name" type= "text" class = "form-control" > </div> </div> </div> <div class = "col-sm-6 col-md-6 col-xs-12" > <div class = "form-group" > <label>Email:</label> <div class = "input-group" > <div class = "input-group-prepend" > <span class = "input-group-text" > <i class = "fa fa-envelope" ></i> </span> </div> <input id= "name" type= "text" class = "form-control" > </div> </div> </div> </div> <div class = "row" > <div class = "col-sm-6 col-md-6 col-xs-12" > <div class = "form-group" > <label>Password:</label> <div class = "input-group" > <div class = "input-group-prepend" > <span class = "input-group-text" > <i class = "fa fa-lock" ></i> </span> </div> <input id= "name" type= "password" class = "form-control" > </div> </div> </div> <div class = "col-sm-6 col-md-6 col-xs-12" > <div class = "form-group" > <label>Confirm Password:</label> <div class = "input-group" > <div class = "input-group-prepend" > <span class = "input-group-text" > <i class = "fa fa-lock" ></i> </span> </div> <input id= "name" type= "password" class = "form-control" > </div> </div> </div> </div> <button type= "button" class = "btn btn-outline-primary rounded-0 float-right" >Register</button> </div> </div> </div>

Step 4



Run the project.



Second Method

Step 1



Open index.html, remove all CDN links from it.

<!doctype html> <html lang= "en" > <head> <meta charset= "utf-8" > <title>HelloWorld</title> <base href= "/" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "icon" type= "image/x-icon" href= "favicon.ico" > </head> <body> <app-root></app-root> </body> </html>

Step 2



Right click on project and open in command prompt.



Step 3

Type the following command in command prompt.

npm install font-awesome –save

Step 4



Open the project folder, find node_modules folder and under that, check font-awesome folder installed.



Step 5



Open angular.json file from the project and type the following code.

"styles" : [ "src/styles.css" , "./node_modules/bootstrap/dist/css/bootstrap.min.css" , "./node_modules/font-awesome/css/font-awesome.min.css" ], "scripts" : [ "./node_modules/jquery/dist/jquery.min.js" , "./node_modules/popper.js/dist/umd/popper.min.js" , "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]

Step 6



Terminate the running server. To terminate the running server, press ctrl+c.

Terminate batch job (Y/N)?

Type Y hit enter

Now, type ng serve to restart the server and open in the browser.

