webpack 没有显示字体很棒的图标（只有空方块）

Question

我使用 angular 6 和 webpack 4 模块捆绑器。我已经搜索了很多关于如何结合 webpack 加载 font-awesome，但只显示空方块。

Font-awesome 通过 npm (npm install 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 被导入到我的基本模块文件中。谁能告诉我我做错了什么。提前致谢。

Answer 1

我在 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团队提供的fontawesome-angular。

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>