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-appInstall font-awesome
npm install font-awesome --saveImport 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.