字体很棒的图标没有加载Angular4项目

Question

我正在使用font-awesome处理角度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>

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

Answer 1

你应该使用fa类而不是fas。 fa类设置font-face。 （帽子提示@mike-hill）

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

Answer 2

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

Answer 3

首先，通过将它们包含在angular.jason的style []中或通过如下方式简单地导入它们，确保已正确设置项目要求以使用真棒字体图标：

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

组件css文件中的

。然后，除了字体图标标记为您提供的内容外，还必须具有“ fa”类。或者，您可以这样：

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

在带有class =“ fa”的div内，您可以直接复制粘贴awsome字体网站中提供的代码。

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

Answer 4

字体真棒5+版

从版本5开始删除

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

安装：

yourapp $ npm安装@ fortawesome / fontawesome-free --save

package.json

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