关于angular：webpack不显示字体真棒图标(仅空正方形)


webpack not showing font-awesome icons (only empty squares)

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

Font-awesome通过npm安装(npm install font-awesome)(版本4.7.0)。

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
  [{
      {
                test: /\\.(eot|woff(2)?|svg|ttf)([\\?]?.*)$/,
                use: [
                    {
                        loader:"file-loader",
                        options: {
                            name:"[name].[ext]",
                            outputPath:"fonts/"                              
                        }
                    }]
            }
  }]
}

字体真棒

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

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

我在我的angular 6项目中遇到了同样的问题，我通过以下方式解决了它。

添加这些依赖关系，字体很棒。 这些是核心，还有用于角度的包装。

1
2
3
4
5
"@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。

1
FontAwesomeModule

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

组件类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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中使用这些图标

1
2
3
4
5
6
      <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>

相关讨论