How to use FontAwesome Icons in Angular Application ?
Last Updated :
26 Jul, 2023
In this article, we will learn how to add FontAwesome Icons to Angular. FontAwesome is a popular icon library that provides a wide range of icons for use in web applications.
Steps to add FontAwesome Icons to Angular:
Step 1: Create a new angular project
ng new my-app
Step 2: Navigate to the project directory
cd my-app
Step 3: Install Font Awesome icons
npm install @fortawesome/fontawesome-free
npm install @fortawesome/angular-fontawesome
Step 4: Use Font Awesome Icons in Angular
Open the angular.json file from the root directory of your project and add the following code:
"styles": [
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/styles.css"
]
Step 5: Include the Required Imports to a styles.css file
@import "~@fortawesome/fontawesome-free/css/all.css";
Step 6: Add Icons to your components
<i class="fas fa-spinner fa-spin"></i>
Project Directory:
After completing the above-mentioned installation process, the below structure will be generated:
Example 1: Below example demonstrates the basic usage of font awesome icons in angular.
HTML
< div >
< h1 class = "header" >GeeksforGeeks</ h1 >
< h2 >
Adding Font Awesome Icons in angular
</ h2 >
< div class = "container" >
< i class = "fas fa-user"
style = "font-size:60px;" >
</ i >
< i class = "fas fa-user"
style = "font-size:54px;" >
</ i >
< i class = "fas fa-user"
style = "font-size:48px;" >
</ i >
</ div >
</ div >
|
CSS
.header {
color : green ;
}
.container {
display : flex;
gap: 10px ;
}
|
CSS
@import "~@fortawesome/fontawesome-free/css/all.css" ;
|
Output:
Example 2: Below example demonstrates the usage of animated font awesome icons in Angular.
HTML
< div >
< h1 class = "header" >
GeeksforGeeks
</ h1 >
< h2 >
Adding Font Awesome Icons in angular
</ h2 >
< div class = "container" >
< p >Your blog is loading...</ p >
< i class = "fas fa-spinner fa-spin" ></ i >
</ div >
</ div >
|
CSS
.header {
color : green ;
}
|
CSS
@import "~@fortawesome/fontawesome-free/css/all.css" ;
|
Output:
Share your thoughts in the comments
Please Login to comment...