Adding Font Awesome to an Angular CLI project using npm

Rocky Segarra
Oct 18 · 1 min read

The Font Awesome upgrade guide can be view here; but the instructions below are a bit more clear to understand.

Installation:
Using NPM:

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
$ npm install @fortawesome/fontawesome-free-brands
$ npm install @fortawesome/angular-fontawesome@0.5.x

Get up and running using Font Awesome with Angular follow below steps:
Add FontAwesomeModule to imports in src/app/app.module.ts:

Tie the icon to the property in your component src/app/app.component.ts:

Use the icon in the template src/app/app.component.html:

Done!

Rocky Segarra

Written by

UX/UI consultant trying to make the web a better place, one user-centered experience at a time.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade