Angular 18 Install Font Awesome Icons Example
In this tutorial, I will show you how to install font awesome icons in angular 18 application.
Icons are a fundamental necessity for every project, conveying information without the need for accompanying labels. They enhance the aesthetic appeal of our application layouts. When considering the integration of icons into your application, Font Awesome emerges as the preferred choice. Font Awesome offers an extensive collection of icons, ensuring effortless utilization.
For instance, let's explore the step-by-step process of installing Font Awesome icons in an Angular 18 application. While the procedure is straightforward, it can be particularly helpful for new developers seeking guidance on its implementation.
Step for Install Font Awesome Icons in Angular 18
- Step 1: Create Angular 18 Project
- Step 2: Install Font-Awesome
- Step 3: Import CSS
- Step 4: Use Font Awesome Icons
- Run Angular App
Let's follow the following steps:
Step 1: Create Angular 18 Project
You can easily create your angular app using below command:
ng new my-new-app
Step 2: Install Font-Awesome
In this step, you need to just install font-awesome on your angular 18 and import css file to style.css file. this is only for css importing. so you can run command bellow:
npm install font-awesome --save
Step 3: Import CSS
After successfully, installed font-awesome, we need to import css files on angular.json file. so let's add following lines on it.
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"
],
......
OR, you can also give path like as this way, if above is not working:
"$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"
],
......
Step 4: Use Font Awesome Icons
Now we are ready to use font awesome classes in our html file. so let's add following code on your app.component.html file.
src/app/app.component.html
<h1>Angular 18 Install Font Awesome Icons Example - ItSolutionStuff.com</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>
You can run the application.
You will see the layout as like below:
You can also use icons from here: Font Awesome Icons List.
I hope it can help you...