13

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)

Makla
  • 9,899
  • 16
  • 72
  • 142
petur
  • 1,366
  • 3
  • 21
  • 42
  • **[See my answer here](https://stackoverflow.com/questions/48146837/font-awesome-fonts-are-not-loaded-into-angular-project/48146907#48146907)** –  Jan 10 '18 at 09:35
  • You may find this useful: https://stackoverflow.com/questions/48027322/font-awesome-5-with-angular – JeB Apr 08 '18 at 20:52

1 Answers1

29

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.

j3hyde
  • 306
  • 3
  • 5
  • 1
    I went with the SVG Redux version. Thank you! – petur Jan 11 '18 at 05:34
  • Note: As of FA 5.1, packages have been renamed https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md#renamed-packages – David May 04 '18 at 11:52