Include @fortawesome/fontawesome to angular-cli project

Question

I'm trying to include font awesome 5 to my angular-cli project (1.6.0) running Angular >5.0.0.

I used (as described):

yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light

It gets the packages successfully. Now I want to include the package to my angular-cli. In my app.component.ts I tried to do (as described at: https://www.npmjs.com/package/@fortawesome/fontawesome):

import  fontawesome  from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-light'

But typescript throws and error:

ERROR in src/app/app.component.ts(2,9): error TS1192: Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export.

With Font Awesome 4 I just included the .css file to "styles" array. But Font Awesome 5 doesn't have a css file that has all the css. It's just a bunch of .js files.

How can I include Font Awesome 5 in my Angular CLI project properly? (I want to be able to use for example <i class="fal fal-user"></i> in my markup)

Answer 1

In Font Awesome 5 you can use font-based icons as in FA4 or you can use new SVG-based icons. I'm still looking into configuring SVG-based with angular-cli but for font-based you can:

Add FontAwesome to your .angular-cli.json:

Include the FA styles either as CSS or SCSS:

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

or add FontAwesome to your styles directly:

Include the styles in styles.css or styles.scss:

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";

or add FontAwesome as CSS to your styles directly:

@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";

If you don't need to modify/enhance the FA SCSS then it's probably easiest to use the first method. It just becomes part of your configuration.

Regarding SVG

I suspect that this requires the FA javascript files to be included but I haven't delved into that yet. Once done it's probably quite similar to the above.

---

SVG Redux

(edited to add more detail on SVG)

It's much simpler than I expected. Given you have the right modules installed:

...you can just add the two required scripts to your .angular-cli.json. You need the base fontawesome script and then whichever pack you need (or all three):

  "scripts": [
    "../node_modules/@fortawesome/fontawesome/index.js",
    "../node_modules/@fortawesome/fontawesome-free-solid/index.js"
  ],

Those scripts will find your normal FA classes and replace the elements with full SVG versions of the FA icons.