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...