How to add Font Awesome to an Angular project

In this article, we will be working through how to use Font Awesome in an Angular app and how we can use Font Awesome’s icon animation and styling.

Before we move further, let’s talk about what Font Awesome is.

Font Awesome

Font Awesome is an icon toolkit with over 1,500 free icons that are incredibly easy to use. The icons were created using a scalable vector and inherit CSS sizes and color when applied to them. This makes them high-quality icons that work well on any screen size.

Before the release of Angular 5, developers had to install the Font Awesome package and reference its CSS in an Angular project before it could be used.

But the release of Angular 5 made it easy to implement Font Awesome in our project by the creation of the Angular component for Font Awesome. With this feature, Font Awesome can be integrated into our projects cleanly.

Font Awesome icons blend with text inline well due to their scalability. In this article, we are going to explore more on how to also use animation, coloring, and sizing for Font Awesome icons.

Creating a demo Angular app

Let’s create a demo Angular app for this tutorial. Open your terminal, CD to the project directory, and run the command below.

Before you run the command, make sure you have Node.js installed in your system and also have Angular CLI installed, too:

ng new angular-fontawesome

Installing Font Awesome dependencies

For those who have an existing project, we can follow up from here. Once the above command is done, CD to the project directory and install the below Font Awesome icon command:

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

# or

yarn add @fortawesome/angular-fontawesome
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-solid-svg-icons

Using Font Awesome icons in Angular applications

There are two steps to using Font Awesome in an Angular project. We’re going to look at both of these:

1. How to use Font Awesome icons at the components level
2. How to use the Font Awesome icons library

How to use Font Awesome icons at the components level

This step has to do with using Font Awesome icons at the component level, and it is not a good approach because it involves us importing icons into each of our components that needs an icon and also importing the same icons multiple times.

We are still going to take a look at how we can use icons in a component in case we are building an application that requires us to use an icon in just one component.

After installing Font Awesome, open the app.module.ts and import the FontAwesomeModule just like the one below:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],

After that, open app.component.ts and import the icon name that you want to use. Let’s say we want to make use of faCoffee:

import { faCoffee } from '@fortawesome/free-solid-svg-icons';

Next, we create a variable name called faCoffee and assign the icon that we imported to the variable so can use it in the app.component.html. If we don’t do that, we can’t use it:

faCoffee = faCoffee;

Now, in the app.component.html, write the code below:

<div>
    <fa-icon ="faCoffee"></fa-icon>
</div>

Run the command to serve our app and to check if our icon is showing:

ng serve

If we look at our webpage, we will see faCoffee displayed on the screen. That shows that the icon was installed and imported successfully.

How to use the Font Awesome icons library

This is the best approach to using Font Awesome in our applications, especially when we want to use it across all components without re-importing icons or importing one icon multiple times. Let’s take a look at how we can achieve that.

Open app.module.ts and write the code below:

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';

export class AppModule { 
  constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, farStar);
  }
}

After that, we can use it directly inside app.component.html without declaring a variable and passing it to that variable before using it:

<div>
    <fa-icon ="['fas', 'star']"></fa-icon>
    <fa-icon ="['far', 'star']"></fa-icon>
</div>

If we load the webpage now, we are going to see the star icon being displayed.

Icon styling in Font Awesome

Font Awesome has four different styles, and we’ll look at the free icons — minus the Pro light icons, which use the prefix 'fal' and a professional license:

• The solid icons use the prefix 'fas' and are imported from @fortawesome/free-regular-svg-icons
• The regular icons use the prefix 'far' and are imported from @fortawesome/free-solid-svg-icons
• The brand icons use the prefix 'fab' and are imported from @fortawesome/free-brands-svg-icons

Moving forward, let’s look at what more we can do with Font Awesome icons.

Changing icon color and size without writing a CSS style

Let’s look at how we can change Font Awesome icon colors without writing a CSS style in Angular.

This approach helps us use an icon at a component level. However, when using this approach across all components, it’s not helpful because it will change the icon colors everywhere in our project’s components. For multiple components, we can just change it once using a CSS class or style attribute.

But when working on a component level, we can use it since we are going to use the icon just in that component instead of creating a CSS attribute for it and styling in the CSS file. So let’s look at how we are going to do this in an Angular project. By default, the icon below is black and we want to change it to red:

// from black
<fa-icon ="['fab', 'angular']" ></fa-icon>

// to red
<fa-icon
      ="['fab', 'angular']"
      [styles]="{ stroke: 'red', color: 'red' }"
></fa-icon>

When changing icon colors and strokes using inline styling, we have to make use of the fa-icon attribute.

Next, we are going to increase the icon size from small to large using inline styling in Angular. To do this, we have to use the size property of the fa-icon:

    <fa-icon
      ="['fab', 'angular']"
      [styles]="{ stroke: 'red', color: 'red' }"
      size="xs"
    ></fa-icon>

    <fa-icon
      ="['fab', 'angular']"
      [styles]="{ stroke: 'red', color: 'red' }"
      size="sm"
    ></fa-icon>

    <fa-icon
      ="['fab', 'angular']"
      [styles]="{ stroke: 'red', color: 'red' }"
      size="lg"
    ></fa-icon>

    <fa-icon
      ="['fab', 'angular']"
      [styles]="{ stroke: 'red', color: 'red' }"
      size="5x"
    ></fa-icon>

    <fa-icon
      ="['fab', 'angular']"
      [styles]="{ stroke: 'red', color: 'red' }"
      size="10x"
    ></fa-icon>

By default, the Font Awesome icons inherit the size of the parent container. It allows them to match any text we might use them with, but we have to give them the size we want if we don’t like the default size.

We use the classes xs, sm, lg, 5x, and 10x. These classes increase and decrease the icon size to what we want.

Animating Font Awesome icons

Let’s also look at how we can animate Font Awesome icons without using CSS or animation libraries in Angular.

As a developer, when a user clicks a submit button or when the page is loading, we may want to show a loader or spinner effect telling the user that something is loading.

We can use Font Awesome icons to achieve that purpose. Instead of importing an external CSS animation library, we can just add the Font Awesome spin attribute to the icon tag.

Doing this saves us from downloading a full CSS animation library just to end up using a spinner effect or writing a long CSS animation using keyframes.

So let’s look at how we can achieve this by using a React icon:

<fa-icon
      ="['fab', 'react']"
      [styles]="{ stroke: 'blue', color: 'blue' }"
      size="10x"
></fa-icon>

We have just imported the React icon, and now we are going to animate it. On the React icon component, add the Font Awesome spin loader attribute:

<fa-icon
      ="['fab', 'react']"
      [styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"
      size="10x"
      [spin]="true"
></fa-icon> 

When we load the webpage, we are going to see the React icon rotating infinitely. This is because we set the spin attribute to true.

Conclusion

In this article, we were able to look at how we can use Font Awesome icons in an Angular project, how to add some basic styling that comes with the icon library, and how to animate icons.

There is still more we can do with Font Awesome icons, things like Fixed Width Icons, Rotating Icons, Power Transforms, and combining two icons. Font Awesome’s tutorials can teach you more about how you can use these tools in your projects.

If you found this article helpful, share it with your friends.