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.
- app.component.html
HTML
<div> <h1 class="header">w3wiki</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:
Example 2: Below example demonstrates the usage of animated font awesome icons in Angular.
- app.component.html
HTML
<div> <h1 class="header"> w3wiki </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:
How to use FontAwesome Icons in Angular Application ?
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.