本文介绍了使用NPM安装Font Awesome 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用Angular(6)应用程序,并且正在尝试使用FA图标,并且没有任何运气.我已成功使用FA(4)图标,例如:

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>

但是<i class="fas fa-align-justify"></i>无法正常工作.我正在使用以下命令来安装FA:

But <i class="fas fa-align-justify"></i> is not working. I am using following command to install FA:

npm install font-awesome --save

这来自node_modules文件夹中的package.json:

我可以看到font-awesome.css,但是它显示Font Awesome 4.7.0,如下所示:

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

angular.json文件中,我引用了FA:"node_modules/font-awesome/css/font-awesome.min.css",

In angular.json file, I referenced FA:"node_modules/font-awesome/css/font-awesome.min.css",

我阅读了很多帖子,例如如何使用字体通过NPM安装了Awesome 5

I read a lot of posts like How to use font Awesome 5 installed via NPM

我还需要做什么?

推荐答案

对于版本5,您需要使用以下软件包@fortawesome/fontawesome.请参阅安装使用软件包管理器.

For version 5, you need following package @fortawesome/fontawesome. See installation using package managers.

使用npm:

npm install --save @fortawesome/fontawesome-free

然后在<head>中引用all.cssall.js.

<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 ,您可以在js代码中导入模块.

OR you can import the module in your js code.

import '@fortawesome/fontawesome-free/js/all.js';

(如果使用的是Sass),则可以将模块导入app.scss.

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>';

注意:用所需的任何图标类型将<type>替换为solidbrandsregular.

Note: Replace <type> with solid, brands or regular whatever type of icons you need.

Font Awesome具有官方的 Angular 组件.

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

注意:用所需的任何图标类型将<type>替换为solidbrandsregular.

Note: Replace <type> with solid, brands or regular whatever type of icons you need.

您还可以安装 Vue 反应组件.

npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome

这篇关于使用NPM安装Font Awesome 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-09 22:53