代码之家 › 专栏 › 技术社区 › E.Meir

使用NPM安装Font awesome 5

font-awesome-5 font-awesome angular

2

E.Meir · 技术社区 · 6 年前

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

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

npm install font-awesome --save

这是从 package.json node_modules 文件夹:

我看得见 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

我还需要做什么?

2 回复 | 直到 5 年前

1

66

itsmysterybox 4 年前

对于版本5,您需要以下软件包 @fortawesome/fontawesome . 见安装 using package managers

使用npm:

npm install --save @fortawesome/fontawesome-free

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

<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 不管你需要什么类型的图标。

Angular 组件。

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

注: <类型> 具有 , 或不管你需要什么类型的图标。

您还可以安装 Vue React 组件。

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

2

14

Spikolynn Ankit 4 年前

它的工作方式应该是:

npm install font-awesome --save

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

…给你的 styles.css 或 styles.scss

对于字体5 使用官方字体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 { }

3

8

CharithU 4 年前

如果您正在使用 npm install --save @fortawesome/fontawesome-free package.json 参考

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

4

3

BruceJo 4 年前

或者,您可以在js代码中安装fontawesome作为一个模块。

步骤:

npm install @fortawesome/fontawesome-free --save
在javascript代码中导入 all.js 按照说明书最下面的说明归档 here

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

-或者-

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

5

2

itsmysterybox 4 年前

我的一个绊脚石是他们安装文档的最后一部分。上面写着参考把文件放在你的头上。

我做得不对。

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

这会让它为你工作。 FontAwesome guide