How to add font-awesome to Angular 2 + CLI project

Question

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

Answer 1

Many instructions above work, I suggest looking at those. However, something to note:

Using <i class="fas fa-coffee"></i> did not work in my project (new practice project only a week old) after installation and the sample icon here was also copied to the clipboard from Font Awesome within the past week.

This<i class="fa fa-coffee"></i> does work. If after installing Font Awesome on your project it isn't yet working, I suggest checking the class on your icon to remove the 's' to see if it works then.

Answer 2

Add it in your package.json as "devDependencies" font-awesome : "version number"

Go to Command Prompt type npm command which you configured.

Answer 3

This post describes how to integrate Fontawesome 5 into Angular 6 (Angular 5 and previous versions will also work, but then you have to adjust my writings)

Option 1: Add the css-Files

Pro: Every icon will be included

Contra: Every icon will be included (bigger app size because all fonts are included)

Add the following package:

npm install @fortawesome/fontawesome-free-webfonts

Afterwards add the following lines to your angular.json:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

Option 2: Angular package

Pro: Smaller app size

Contra: You have to include every icon you want to use seperatly

Use the FontAwesome 5 Angular package:

npm install @fortawesome/angular-fontawesome

Just follow their documentation to add the icons. They use the svg-icons, so you only have to add the svgs / icons, you really use.

Answer 4

There are many good answers here. But if you tried all of them and still getting squares instead fontawesome icons, check your css rules. In my case I had the following rule:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

And it overrides fontawesome fonts. Just replacing * selector to body solved my problem:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

Answer 5

Thought I would throw in my resolution to this since font-awesome is now installed differently according to their documentation.

npm install --save-dev @fortawesome/fontawesome-free

Why it is fortawesome now escapes me but thought I would stick with the most recent version rather than falling back to the old font-awesome.

Then I imported it into my scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

Hope this helps