How to install Font Awesome in Angular

You can get vector icons and social logos on your website with Font Awesome. Font awesome has the most popular icon set and toolkit. In this article, you will learn how to install font-awesome in angular. There are two methods by which you can install font-awesome in angular.

I have used the Bootstrap CSS framework in this project for a better design. If you don’t know how to use bootstrap in angular, refer the following tutorial:
How to install bootstrap in angular
But for using font awesome it is not necessary to use bootstrap.

Method 1: Using CDN Link

Step1:

By using this method you have to paste following CDN link into head tag of index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

Example: Refer following example in which I’ve pasted CDN link in the head tag of index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FontAwesomeAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Step2:

Open app.component.html file from your project and put following code in it.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="https://devconquer.com">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="https://devconquer.com/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://devconquer.com/category/javascript/">JavaScript</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://devconquer.com/category/angular/">Angular</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">fontawesome in angular</h1>

  <div class="flex-center">
    <i class="fas fa-thumbs-up"></i>
    <a class="nav-link" href="https://www.facebook.com/DevConquer">Facebook</a>
  </div>

  <div class="flex-center">
    <span class="fas fa-thumbtack"></span>
    <a class="nav-link" href="https://in.pinterest.com/DevConquer/">Pinterest</a>
  </div>

  <div class="flex-center">
    <i class="fas fa-hashtag"></i>
    <a class="nav-link" href="https://twitter.com/DevConquer">Twitter</a>
  </div>  
</div>

Open app.component.css file and paste following CSS

.flex-center {
  display: flex;
  align-items: center;
}

Step 3:

Run your project and you will see output like following:

Method 2: By installing npm package

Step 1:

Install fontawesome npm package by following command:

npm install @fortawesome/angular-fontawesome

Install necessary supporting packages:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons

Step 2:

Import FontAwesomeModule in app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3:

Open app.component.ts file from your project and put following code in it.

import { Component } from '@angular/core';
import { faThumbsUp, faThumbtack, faHashtag } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'font-awesome-angular';
  faThumbsUp = faThumbsUp;
  faThumbtack = faThumbtack;
  faHashtag = faHashtag;
}

Open app.component.html file and paste following code in it.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="https://devconquer.com">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="https://devconquer.com/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://devconquer.com/category/javascript/">JavaScript</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://devconquer.com/category/angular/">Angular</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">fontawesome in angular</h1>

  <div class="flex-center">
    <fa-icon [icon]="faThumbsUp"></fa-icon>
    <a class="nav-link" href="https://www.facebook.com/DevConquer">Facebook</a>
  </div>

  <div class="flex-center">
    <fa-icon [icon]="faThumbtack"></fa-icon>
    <a class="nav-link" href="https://in.pinterest.com/DevConquer/">Pinterest</a>
  </div>

  <div class="flex-center">
    <fa-icon [icon]="faHashtag"></fa-icon>
    <a class="nav-link" href="https://twitter.com/DevConquer">Twitter</a>
  </div>  
</div>

Open app.component.css file and paste following css in it.

.flex-center {
  display: flex;
  align-items: center;
}

Step4:

Run your project and you will see output like following:

font-awesome-in-angular-output

Conclusion:

In this tutorial, you learned how to use font awesome in angular. I have explained two methods by which you can use font awesome. You can choose any method you like. If you have any problems ask me through a comment.

Leave a Reply