使用NPM安装Font awesome 5

Question

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

<i class="fa fa-align-justify"></i>

但是:无法正常工作,我正在使用此命令安装FA

npm install font-awesome --save

来自 package.json

在node_modules文件夹中,我可以看到FA.css,但它说Font Awesome 4.7.0 ...

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

我红了很多帖子就像那个 如何使用通过NPM安装的字体awesome 5

我还需要做什么？

Answer 1

对于版本5,您需要以下包 @fortawesome/fontawesome

使用此命令:

npm install @fortawesome/fontawesome-free

访问这里

Fontawesome有针对Angular的特定包.要了解如何使用Angular,请单击此处

Answer 2

如果您使用npm install --save @fortawesome/fontawesome-free更改package.json引用

import "@fortawesome/fontawesome-free/css/all.css"; 

Answer 3

编辑：

为了澄清，下面的答案错误地考虑了Font Awesome 4.7.0而不是Font Awesome 5。

原版的：

只需执行以下操作即可：

npm install font-awesome --save

并添加：

@import "~font-awesome/css/font-awesome.css";

...给您styles.css或styles.scss。

另一种选择是使用官方字体真棒5角度组件

npm add @fortawesome/fontawesome-svg-core
npm add @fortawesome/free-solid-svg-icons
npm add @fortawesome/angular-fontawesome

在您的模板中：

<div style="text-align:center">
  <fa-icon [icon]="faAlignJustify"></fa-icon>
</div>

在您的打字稿中：

import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faAlignJustify = faAlignJustify;
}

在组件的模块中：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ]
})
export class MyModule { }

Answer 4

或者，您可以将 fontawesome 作为模块安装在 js 代码中。

脚步：

1. npm install @fortawesome/fontawesome-free --save
2. 在您的 javascript 代码中，按照此处all.js说明最底部的说明导入文件。

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

- 或者 -

require('@fortawesome/fontawesome-free/js/all.js');