【问题标题】：Font-awesome icons not loading on Angular4 projectAngular4项目上未加载字体真棒图标
【发布时间】：2018-05-22 04:42:41
【问题描述】：

我正在使用 font-awesome 开发一个 angular 4 项目，我按照本指南使用 npm 安装库： How to add font-awesome to Angular 2 + CLI project

我已将项目配置为使用 ng-serve 命令编译 scss 样式表，我的 angular-cli.json 样式路径如下所示：

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"

      ],

我想制作一个带有地址卡图标的按钮，我也在使用 Bootstrap 4，所以它看起来像这样：

<button class="btn btn-sm btn-primary"><span class="fas fa-address-card"></span></button>

但是当它加载时，它看起来像这样：

【问题讨论】：

您应该使用类fa 而不是fas。这个类设置字体。

标签： angular font-awesome

【解决方案1】：

您应该使用类 fa 而不是 fas。 fa 类设置字体。（给@mike-hill 的帽子提示）

查看源代码 http://fontawesome.io/icon/address-card/

【讨论】：

天啊，我花了太长时间才找到这个答案——为什么他们会在主页上生成这样的例子？
@bigbasti 适用于 Font Awesome 5。您可能使用的是旧版本。

【解决方案2】：

字体真棒版本 5+

fa 前缀 已从版本 5 中删除。为了使用 fas 前缀，请安装版本 5+ 并包含在您的样式中。

安装：

yourapp$npm install @fortawesome/fontawesome-free --save

package.json

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

【讨论】：

我认为应该添加到angular.json文件而不是package.json

【解决方案3】：

将依赖项添加到 Angular.json 或 Angular-cli.json 之后。 1）停止运行App 2）启动它它将识别新资源

【讨论】：

我花了将近 2 天的时间才弄清楚我的问题。感谢您提到添加新资源后重新启动应用程序..

【解决方案4】：

首先确保您已正确设置项目要求以使用令人敬畏的字体图标，方法是将它们包含在 angular.jason 的样式 [] 中，或者像这样简单地导入它们：

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

在组件 css 文件中。那么除了 font-icons 标记给你的东西之外，还需要有“fa”类。或者，您可以这样做：

<div class="fa">
<i class="whateverTheIconClassYouWant"></i>
</div>

在 class="fa" 的 div 中，您可以直接复制粘贴 font awsome 网站提供的代码。

希望这会有所帮助！编码愉快！！！！

【讨论】：