Install Font Awesome 5 with NPM
I am working with Angular(6) application, and I am trying to use FA icons, and drop-down with no luck. I am successfully using FA(4) icons, like:
<i class="fa fa-align-justify"></i>
But <i class="fas fa-align-justify"></i> is not working. I am using following command to install FA:
npm install font-awesome --save
This is from package.json in node_modules folder:
I can see font-awesome.css, but it says Font Awesome 4.7.0 as shown below:
In angular.json file, I referenced FA:
"node_modules/font-awesome/css/font-awesome.min.css",
I read a lot of posts like How to use font Awesome 5 installed via NPM
What do I need to do else?
Answer
For version 5, you need following package @fortawesome/fontawesome. See installation using package managers.
Using npm:
npm install --save @fortawesome/fontawesome-free
Then reference either the all.css or all.js in the <head>.
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
Note: Make sure the path is right, depends on where you installed the package from.
OR you can import the module in your js code.
import '@fortawesome/fontawesome-free/js/all.js';
OR if you are using Sass, you can import the module in app.scss.
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';
Note: Replace <type> with solid, brands or regular whatever type of icons you need.
Font Awesome has an official Angular component.
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome
Note: Replace <type> with solid, brands or regular whatever type of icons you need.
You can also install Vue and React components.
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome