Fontawesome 5与Angular 2+

时间:2018-02-21 21:32:19

标签: angular font-awesome-5 angular-fontawesome

我不知道如何将FontAwesome 5包含在Angular 2+应用中。 我找到了这个包 - https://www.npmjs.com/package/@fortawesome/fontawesome 你能告诉我在哪里可以导入这个包吗? 也许在app.module.ts文件中?

2 个答案:

答案 0 :(得分:11)

首先:您需要安装软件包:

$ npm i --save @fortawesome/fontawesome

$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

然后在 app.component.ts 中添加导入:

import fontawesome from '@fortawesome/fontawesome';
import faTrashAlt from '@fortawesome/fontawesome-free-regular/';

并在app.component 的构造函数中,将图标添加到fontawesome库中:

fontawesome.library.add(faTrashAlt);

在html页面中,您只需添加图标:

<i class="far fa-trash-alt"></i>

链接到fontawesome文档: https://fontawesome.com/how-to-use/use-with-node-js#free

答案 1 :(得分:0)

您需要安装该软件包:

npm install @fortawesome/fontawesome-free

然后全部导入

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

或单独导入,例如:

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