Question

我将angular 6与webpack 4模块捆绑器一起使用。我已经搜索了很多有关如何加载与Webpack结合使用的超棒字体的方法，但是只显示了空的正方形。

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>

webpack不显示字体真棒图标（仅空正方形）

1 个答案: