使用 NPM 安装 Font Awesome 5

Question

我正在使用 Angular(6) 应用程序，我正在尝试使用 FA 图标和下拉菜单，但没有成功。我成功地使用了 FA(4) 图标，例如：

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

但是 <i class="fas fa-align-justify"></i> 不工作。我正在使用以下命令安装 FA：

npm install font-awesome --save

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

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

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

我读了很多像How to use font Awesome 5 installed via NPM

这样的帖子

我还需要做什么？

Answer 1

对于 Font Awesome 4.7.0：

只需执行以下操作即可工作：

npm install font-awesome --save

并添加：

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

...到您的 styles.css 或 styles.scss.

对于 Font Awesome 5 使用官方的 Font Awesome 5 angular 组件

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 2

对于版本 5，您需要以下软件包 @fortawesome/fontawesome。请参阅安装 using package managers。

使用 npm:

npm install --save @fortawesome/fontawesome-free

然后在 <head> 中引用 all.css 或 all.js。

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

注意：确保路径正确，取决于你从哪里安装包。

或你可以在你的js代码中导入模块。

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

或如果您使用的是Sass，您可以在app.scss.

中导入模块

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';

注意：将<type>替换为solid、brands或regular您需要的任何类型的图标。

Font Awesome 有官方 Angular 组件。

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome

注意：将<type>替换为solid、brands或regular您需要的任何类型的图标。

您还可以安装 Vue and React 个组件。

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

Answer 3

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

我做错了。

link 的正确方法如下：

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-pro/css/all.css">

希望对您有所帮助！

这应该可以为您工作。另外，我建议使用 FontAwesome guide

重新安装最新版本的 npm 包

Answer 4

如果您使用的是 npm install --save @fortawesome/fontawesome-free，请将 package.json 更改为参考

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

Answer 5

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

步骤：

npm install @fortawesome/fontawesome-free --save
在您的 javascript 代码中，按照说明 here.

all.js

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

- 或 -

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

使用 NPM 安装 Font Awesome 5

Install Font Awesome 5 with NPM

angular

font-awesome

font-awesome-5