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">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>HelloWorld</title>
  7. <base href="/">
  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>
  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>
  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="/">
  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