Angular 字体5和角度5

我使用的是FontAwesomeNPM软件包（FontAwesome4.7版本），但我想升级到FontAwesome5。我已安装以下软件包：

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

我使用的图标如下：

<i class="fa fa-plus"></i>

<i class="fas fa-sign-out-alt fa-2x"></i>

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

在我的app.module.ts中，它正在工作，但我不想逐个导入每个图标。有没有一种方法可以像我使用上一个版本那样使用它们？有没有办法不一个一个地进口

---

谢谢

您需要在index.html中设置css url

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

下面是一个工作示例：

---

是的，您可以全部导入并添加它们

import{fas}来自“@fortawesome/free solid svg icons”；
从“@fortawesome/free常规svg图标”导入{far}；
导出类AppModule{
构造函数（库：FaIconLibrary）{
图书馆补充资料包（fas、far）；
}
}

也可以导入整个图标样式。但是要小心！这种导入图标的方式不支持树摇动，因此导入包中的所有图标都将在捆绑包中结束

另外，由于您使用的是

角形字体

，请使用它：

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从“@fortawesome/angular fontawesome”导入{FontAwesomeModule，FaIconLibrary}；
从“@fortawesome/free solid svg icons”导入{faCoffee}；
从“./app.component”导入{AppComponent}；
@NGD模块({
声明：[AppComponent]，
导入：[BrowserModule，FontAwesomeModule]，
引导：[AppComponent]
})
导出类AppModule{
构造函数（库：FaIconLibrary）{
//将图标添加到库中，以便在其他组件中方便地访问
图书馆.附件（传真机）；
}
}

和html格式

安装

npm install --save @fortawesome/fontawesome-free

并在.cli中使用

 "styles": [
    "styles.css",
    "../node_modules/@fortawesome/fontawesome-free/css/all.css",

参考：

---

我在angular 8版本中使用这个。它工作得很好。 请按照以下简单程序操作：

首先通过angular cli安装它

npm安装--免费保存@fortawesome/fontawesome

打开angular.json并更新css文件，如下所示

“风格”：[ “styles.css”， “node_modules/@fortawesome/fontawesome free/css/all.css”]

重新启动服务器

例如，如何添加

<i class="fas fa-paper-plane"></i>

快乐编码：）

---

尝试使用“angular fontawesome”后，这种方式对我来说更容易从fa升级。4到5作为项目中的图标，我们混合了css中的原始代码和伪元素，这样现有图标仍然可以向后兼容，除了一些别名图标。看起来“非常棒”已经变得非常麻烦了，尤其是当你的图标使用率很低的时候。为什么这是一个开发依赖项？你是对的，它不应该是一个开发依赖项。现在你已经使用这个方法将每个图标都包含到你的项目中了