Angular 不显示字体图标的网页（仅空方框）

我使用angular 6和webpack 4模块绑定器。我已经搜索了很多关于如何加载字体与网页组合，但只有空方块显示

Font awesome是通过npm安装的（npm安装Font awesome）（版本4.7.0）

webpack.config.js

module: {
  [{
      {
                test: /\.(eot|woff(2)?|svg|ttf)([\?]?.*)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "fonts/"                               
                        }
                    }]
            }
  }]
}

font-awesome.scss

$fa-font-path: '~font-awesome/fonts';
@import "~font-awesome/scss/font-awesome";

---

font-awesome.scss导入到我的基本模块文件中。谁能告诉我我做错了什么。提前感谢。

我在angular 6项目中也遇到了同样的问题，我用下面的方法解决了这个问题

添加这些依赖项，而不是字体。这些都是核心，有一个包的角度以及

"@fortawesome/angular-fontawesome": "0.1.0-9",
"@fortawesome/fontawesome-svg-core": "1.2.0-11",
"@fortawesome/free-brands-svg-icons": "5.1.0-8",
"@fortawesome/free-regular-svg-icons": "5.1.0-8",
"@fortawesome/free-solid-svg-icons": "5.1.0-8",

现在将字体添加到模块中，如下所示导入。这是font awesome团队提供的font awesome

FontAwesomeModule

现在在组件中添加所需的图标，并以下面的html方式使用它们

组件类

import { Component, OnInit } from '@angular/core';
import {
  faUtensils,
  faGlassMartini,
  faTruckMoving,
  faWineGlass,
  faCoffee,
  faShoppingCart,
  faGamepad,
  faBirthdayCake,
  faBeer,
  faStar,
  faStarHalf, faMagic, faSquare
} from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

@Component({
  selector: 'xxxx',
  templateUrl: './xxx.html',
  styleUrls: ['./xxx.scss']
})
export class SomeComponent implements OnInit {

  constructor(
  ) {
    library.add(
      faUtensils,
      faGlassMartini,
      faTruckMoving,
      faCoffee,
      faWineGlass,
      faShoppingCart,
      faGamepad,
      faBirthdayCake,
      faBeer,
      faStar,
      faStarHalf,
      faMagic,
      faSquare
    );
  }

  ngOnInit() {
  }
}

然后在html中使用这些图标

      <fa-icon [icon]="['fas', 'beer']" [size]="'2x'"
               [styles]="{color:'#F36F24'}"></fa-icon>
      <fa-icon [icon]="['fas', 'glass-martini']" [size]="'2x'"
               [styles]="{color:'#F36F24'}"></fa-icon>
      <fa-icon [icon]="['fas', 'truck-moving']" [size]="'2x'"
               [styles]="{color:'#F36F24'}"></fa-icon>

您的项目中有webpack吗？我正在使用angular cli，它在内部使用webpack。所以angular cli将使用webpack构建和执行所有操作。您没有使用angular cli吗？我没有使用angular cli，而是使用cratch的自定义网页包配置。我将尝试您的建议答案，并会通知您一切是否正常。它与@fortawesome/angular fontawesome一起工作：“0.1.0-10版本…但当我使用最新版本0.1.0时，我会得到“意外值”“未定义”“由模块导入”…我将尝试最新版本

0.1.0

。也许这只是个小问题。我想它应该有用