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)
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.