Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
523 views
in Technique[技术] by (71.8m points)

angular - 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:

image

I can see font-awesome.css, but it says Font Awesome 4.7.0 as shown below:

image

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?

question from:https://stackoverflow.com/questions/52455614/install-font-awesome-5-with-npm

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...