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 https://github.com/Caballerog/angular-fontawesome-1

Guest Blogger

emmawedekind profile

Special thanks to our guest blogger Carlos Caballero, a PhD. in Computer Science from Málaga, Spain for his contribution to the Ronald James Blog this week.

twitter Carlillo github Caballerog

Who Are Ronald James?

We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.

Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.

Contact our Team

If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.

Let's be Friends!

Follow us on our blog, FacebookLinkedInTwitter or Instagram to follow industry news, events, success stories and new blogs releases.


Back to Blog

</Follow Us>