In this article, we’ll look at how to use Font Awesome in Angular applications, and how to use Font Awesome for icon animation and styling.

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

Font Awesome

Font Awesome is an icon kit with over 1500 free ICONS that are very easy to use. These ICONS are created using extensible vectors and inherit CSS dimensions and colors when applied to them. This makes them high-quality ICONS that work well on any screen size.

Before Angular 5 is released, developers must install the Font Awesome package and reference its CSS in their Angular projects to use it.

But the release of Angular 5 made it easier to implement Font Awesome in our project by creating an Angular component for Font Awesome. With this capability, Font Awesome can be cleanly integrated into our project.

Because of the scalability of the Font Awesome icon, it blends well with inline text. In this article, we’ll further explore how to animate, color, and size Font Awesome ICONS.

Create a demo Angular application

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

Before you run this command, make sure you have Node.js installed on your system, as well as the Angular CLI.

ng new angular-fontawesome
Copy the code

Install the Font Awesome dependency

For those of you who already have a project, we can follow up from here. After the above command is complete, CD to the project directory and install the Font Awesome icon command below.

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

Copy the code

Use the Font Awesome icon in Angular applications

Using Font Awesome in an Angular project has two steps. So let’s look at these two points.

  1. How do I use Font Awesome ICONS at the component level
  2. How do I use the Font Awesome library

How do I use Font Awesome ICONS at the component level

This step has to do with using the Font Awesome icon at the component level, which is not a good idea because it involves importing the icon into every component that needs it, and importing the same icon multiple times.

Again, we’ll look at how to use ICONS in a component, in case we need to use ICONS in a component when building an application.

After installing FontAwesome, open app.module.ts and import FontAwesomeModule, as shown below.

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

Copy the code

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

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

Copy the code

Next, we create a variable named faCoffee and assign our imported icon to it so that we can use it in app.component.html. If we don’t, we can’t use it.

faCoffee = faCoffee;

Copy the code

Now, at app.component.html, write the following code.

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

Copy the code

Run the command to serve our application and check that our icon is displayed.

ng serve

Copy the code

If we look at our web page, we’ll see faCoffee on the screen. This indicates that the icon has been installed and successfully imported.

How do I use the Font Awesome library

This is the best way to use Font Awesome in our applications, especially if we want to use it in all of our components without having to re-import an icon or import an icon multiple times. Let’s look at how we can achieve this goal.

Open app.module.ts and write the following code.

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); }}Copy the code

After that, we can use it directly in app.component.html, without having to declare a variable and pass it to that variable before using it.

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

Copy the code

If we load the page now, we will see the star icon displayed.

Icon styles in Font Awesome

Font Awesome comes in four different styles, so let’s take a look at the free icon — minus the Pro Light icon, which uses the prefix ‘fal’ and has a professional license.

  • Entity ICONS use prefixes'fas'And imported from the following websites:@fortawesome/free-regular-svg-icons
  • Common ICONS use prefixes'far'And import from the following websites@fortawesome/free-solid-svg-icons
  • Brand ICONS use prefixes'fab'And import from the following websites.@fortawesome/free-brands-svg-icons

Next, let’s look at what else we can do with the Font Awesome icon.

You can change the color and size of an icon without writing CSS styles

Let’s see how we can change the color of the Font Awesome icon in Angular without writing CSS styles.

This approach helps us use ICONS at the component level. However, this approach is unhelpful when used across all components, as it will change the icon color of all components in our project. For multiple components, we can change it once with a single CSS class or style property.

However, when we work at a component level, we can use it because we will only use the icon in that component, rather than creating a CSS property for it and styling it in a CSS file. So let’s see how we can 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 [icon]="['fab', 'angular']" ></fa-icon>

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

Copy the code

When using inline styling to change icon colors and strokes, we must use the fa-icon property.

Next, we use inline styles in Angular to increase the size of ICONS from small to large. To do this, we must use the fa-icon of the size property.

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

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

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

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

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

Copy the code

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

We use xs, SM, LG, 5X, and 10x classes. These classes increase and decrease the size of ICONS to the extent we want.

Animate the Font Awesome icon

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

As a developer, when a user clicks on a submit button or a page is loading, we might want to display a loader or spreader effect that tells the user something is loading.

We can do this using the Font Awesome icon. Instead of importing an external CSS animation library, we simply add the Font Awesomespin attribute to the icon label.

This saves us from downloading a full CSS animation library and ending up with a rotating effect or writing a long CSS animation using keyframes.

So let’s look at how we can do this by using the React icon.

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

Copy the code

We just imported the React icon, now we need to animate it. On the React icon component, add the Font Awesomespin Loader property.

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

Copy the code

When we load the page, we see the React icon spinning endlessly. This is because we set the spin property to true.

conclusion

In this article, we can see how to use Font Awesome ICONS in Angular projects, how to add some basic styles to the icon library, and how to animate ICONS.

We can also do many more things with Font Awesome ICONS, such as fixed-width ICONS, rotating ICONS, Power Transforms, and combining two ICONS. Font Awesome’s tutorial can teach you more about how to use these tools in your projects.

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

The postHow to add Font Awesome to an Angular projectappeared first onLogRocket Blog.