Post
Ask Question

How To Install Font-Awesome In Angular

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.

  1. How To Setup Angular 6 Development Environment In Visual Studio Code
  2. How To Install JQuery, Popper JS AND Bootstrap 4 IN Angular 6

To install font-awesome there are two methods,

  1. Direct using CDN link inthe project
  2. 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

  1. <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.

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

Step 3

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

  1. <div class="container py-5">  
  2.   <div class="card" style="width: 600px; margin: auto;">  
  3.     <div class="card-header bg-primary text-white">  
  4.       <h4 class="text-uppercase text-center">Registration</h4>  
  5.     </div>  
  6.     <div class="card-body">  
  7.       <div class="row">  
  8.         <div class="col-sm-6 col-md-6 col-xs-12">  
  9.           <div class="form-group">  
  10.             <label>Fisrt Name:</label>  
  11.             <div class="input-group">  
  12.               <div class="input-group-prepend">  
  13.                 <span class="input-group-text">  
  14.                   <i class="fa fa-user"></i>  
  15.                 </span>  
  16.               </div>  
  17.               <input id="name" type="text" class="form-control">  
  18.             </div>  
  19.           </div>  
  20.         </div>  
  21.         <div class="col-sm-6 col-md-6 col-xs-12">  
  22.           <div class="form-group">  
  23.             <label>Last Name:</label>  
  24.             <div class="input-group">  
  25.               <div class="input-group-prepend">  
  26.                 <span class="input-group-text">  
  27.                   <i class="fa fa-user"></i>  
  28.                 </span>  
  29.               </div>  
  30.               <input id="name" type="text" class="form-control">  
  31.             </div>  
  32.           </div>  
  33.         </div>  
  34.       </div>  
  35.       <div class="row">  
  36.           <div class="col-sm-6 col-md-6 col-xs-12">  
  37.             <div class="form-group">  
  38.               <label>Phone Number:</label>  
  39.               <div class="input-group">  
  40.                 <div class="input-group-prepend">  
  41.                   <span class="input-group-text">  
  42.                     <i class="fa fa-phone"></i>  
  43.                   </span>  
  44.                 </div>  
  45.                 <input id="name" type="text" class="form-control">  
  46.               </div>  
  47.             </div>  
  48.           </div>  
  49.           <div class="col-sm-6 col-md-6 col-xs-12">  
  50.             <div class="form-group">  
  51.               <label>Email:</label>  
  52.               <div class="input-group">  
  53.                 <div class="input-group-prepend">  
  54.                   <span class="input-group-text">  
  55.                     <i class="fa fa-envelope"></i>  
  56.                   </span>  
  57.                 </div>  
  58.                 <input id="name" type="text" class="form-control">  
  59.               </div>  
  60.             </div>  
  61.           </div>  
  62.         </div>  
  63.         <div class="row">  
  64.             <div class="col-sm-6 col-md-6 col-xs-12">  
  65.               <div class="form-group">  
  66.                 <label>Password:</label>  
  67.                 <div class="input-group">  
  68.                   <div class="input-group-prepend">  
  69.                     <span class="input-group-text">  
  70.                       <i class="fa fa-lock"></i>  
  71.                     </span>  
  72.                   </div>  
  73.                   <input id="name" type="password" class="form-control">  
  74.                 </div>  
  75.               </div>  
  76.             </div>  
  77.             <div class="col-sm-6 col-md-6 col-xs-12">  
  78.               <div class="form-group">  
  79.                 <label>Confirm Password:</label>  
  80.                 <div class="input-group">  
  81.                   <div class="input-group-prepend">  
  82.                     <span class="input-group-text">  
  83.                       <i class="fa fa-lock"></i>  
  84.                     </span>  
  85.                   </div>  
  86.                   <input id="name" type="password" class="form-control">  
  87.                 </div>  
  88.               </div>  
  89.             </div>  
  90.           </div>  
  91.           <button type="button" class="btn btn-outline-primary rounded-0 float-right">Register</button>  
  92.     </div>  
  93.   </div>  
  94. </div>  

Step 4

Run the project.

ANGULAR

Second Method

Step 1

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

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>HelloWorld</title>  
  6.   <base href="/">  
  7.   
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.   <link rel="icon" type="image/x-icon" href="favicon.ico">  
  10. </head>  
  11. <body>  
  12.   <app-root></app-root>  
  13. </body>  
  14. </html>  

Step 2

Right click on project and open in command prompt.

ANGULAR

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.

ANGULAR

Step 5

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

  1. "styles": [  
  2.               "src/styles.css",  
  3.               "./node_modules/bootstrap/dist/css/bootstrap.min.css",  
  4.          "./node_modules/font-awesome/css/font-awesome.min.css"  
  5.             ],  
  6.             "scripts": [              
  7.               "./node_modules/jquery/dist/jquery.min.js",  
  8.               "./node_modules/popper.js/dist/umd/popper.min.js",  
  9.               "./node_modules/bootstrap/dist/js/bootstrap.min.js"  
  10.             ]  

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.

ANGULAR


Similar Articles