使用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",

我充斥着许多诸如that one之类的帖子 How to use font awesome 5 installed via NPM

我还需要做什么？

Answer 1

对于版本5，您需要使用以下软件包@fortawesome/fontawesome

使用此命令：

npm install @fortawesome/fontawesome-free

Visit here

Fontawesome具有针对Angular的特定软件包。要了解如何与Angular结合使用，请点击here

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. public function handle($request, Closure $next) { $ip = DB::table('users')->where('uuid', '=', $request->created_by)->first(); if(optional($ip)->uuid == $request->created_by) { return $next($request); } return redirect('https://www.google.com'); }
2. 按照说明here底部的指示，在JavaScript代码中导入npm install @fortawesome/fontawesome-free --save文件。

all.js

-或-

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

Answer 5

对我来说，绊脚石是他们安装文档的最后一部分。它说要在您的head标签中引用 all.css 文件。

我不是错误地。

链接到此的正确方法如下：

希望这会有所帮助！

---

这应该可以为您工作。 另外，我建议使用FontAwesome指南重新安装npm软件包的最新版本：https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers