Open In App
Related Articles

How to use FontAwesome Icons in Angular Application ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

ang-ps.png

Example 1: Below example demonstrates the basic usage of font awesome icons in angular.

  • app.component.html

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>

                    
  • app.component.css

CSS

.header {
    color: green;
}
  
.container {
    display: flex;
    gap: 10px;
}

                    
  • styles.css

CSS

@import "~@fortawesome/fontawesome-free/css/all.css";

                    

Output:

333

Example 2: Below example demonstrates the usage of animated font awesome icons in Angular.

  • app.component.html

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>

                    
  • app.component.css

CSS

.header {
    color: green;
}

                    
  • styles.css

CSS

@import "~@fortawesome/fontawesome-free/css/all.css";

                    

Output:

ezgifcom-crop-(41)

Last Updated : 26 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads