DEV Community

Carlos Caballero for Angular

Posted on • Originally published at

Angular + FontAwesome in Five Easy Steps

Angular + FontAwesome in Five Easy Steps

A step-by-step angular tutorial

FontAwesome is the internet’s most popular icon toolkit which has been redesigned and built from scratch. On top of this, features like icon font ligatures, an SVG framework, official NPM packages for popular frontend libraries like React, and access to a new CDN.

In this post, I am going to show you how to configure fontawesome to be used in angular in only 5–1 steps.

In these steps, we will configure fontawesome without using the specific Angular package. In a future post, it will be configured using the official package, which is even simpler, and we will have fontawesome working with the same Angular ecosystem.

Step 1 (or 0). Init your project

If you are thinking about using fontawesome in your angular project, you probably have an initialized project already. However, for this tutorial, let’s start with our project from scratch.

Step 2. Install fontawesome

Install fontawesome.

Step 3. Include fontawesome

There are several ways to include fontawesome in our project:

  1. Open angular.json and insert a new entry into the styles array:

  1. Open styles.scss and insert a new entry into the file:

Step 4. Add fontawesome CSS Class

Open your template’s component and add the fontawesome CSS class in any of the html elements:

Step 5. Run your app!

Run your app:

ng serve

More, More and More…

The GitHub branch of this post is

Originally published at on September 03, 2019.

Top comments (6)

michaeljota profile image
Michael De Abreu

Font Awesome has a component implementation in Angular. @fortawesome/angular-fontawesome. I think it's better than using CSS classes.

kemenesbalazs profile image
Balázs Kemenes

I think the CSS import is more lightweight, and can be used with storybook more easily then the component implementation.

michaeljota profile image
Michael De Abreu

With the component implementation you can pick the icons you want to use, instead of importing the whole library

carlillo profile image
Carlos Caballero


I just going to write about that concrete module.

The next week to compare these steps!

Good catch!

osspro profile image

You should have selectable code instead of images for easy copy & paste

netalex profile image
Alessandro Aprile

how to use it with regular css instead of scss, just in case?