Angular CLI 中未显示字体真棒图标：8.2.2 改为显示正方形答案

【问题标题】：Font-awsome icons not showing in Angular CLI: 8.2.2 instead showing squaresAngular CLI 中未显示字体真棒图标：8.2.2 改为显示正方形
【发布时间】：2021-03-24 02:08:31
【问题描述】：

我已经通过npm install --save font-awesome angular-font-awesome 从https://www.npmjs.com/package/angular-font-awesome 安装了Font Awesome。

在 angular.json 中链接

"styles": [
     "src/styles.css",
     "node_modules/font-awesome/css/font-awesome.min.css"
]

在 index.html 中我已经链接了库

<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">

我的图标的 html 代码如下所示：

<i class="fa fa-facebook-f"></i>

仍然显示正方形而不是图标。

谁能帮忙？

【问题讨论】：

标签： angular npm font-awesome

【解决方案1】：

要安装 «font-awesome»，请使用：

$ npm install @fortawesome/angular-fontawesome@<version>
$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons

那么我们需要在app.module.ts中导入这个：

imports: [
    BrowserModule,
    FontAwesomeModule
],

src/app/app.component.html:

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>

src/app/app.component.ts

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;
}

更新：

可以通过添加faFacebook 图标来使用Facebook fontawesome。让我举个例子。

安装包free-regular-svg-icons:

npm i --save @fortawesome/free-regular-svg-icons

安装包free-regular-svg-icons:

npm i --save @fortawesome/free-brands-svg-icon

App.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
import { faSquare as farSquare, faCheckSquare as farCheckSquare } from '@fortawesome/free-regular-svg-icons';
import { faStackOverflow, faGithub, faMedium, faFacebook } from '@fortawesome/free-brands-svg-icons';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(private library: FaIconLibrary) {
    library.addIcons(faSquare, faCheckSquare, farSquare
        , farCheckSquare, faStackOverflow, faGithub, faMedium, faFacebook);
  }
}

app.component.html：

<div style="text-align:center">
  <h2>Using Brand Icons</h2>
  <fa-icon [icon]="['fab', 'stack-overflow']"></fa-icon>
  <br>
  <fa-icon [icon]="['fab', 'github']"></fa-icon>
  <br>
  <fa-icon [icon]="['fab', 'medium']"></fa-icon>
  <br>
  <fa-icon [icon]="['fab', 'facebook']"></fa-icon>  
  <br>
</div>

It can be seen at stackblitz.com.

【讨论】：

@fortawesome/free-solid-svg-icons 中没有 Facebook 图标，这是免费的吗？因为我需要 Facebook 和其他社交网络的图标。但是你对这个目录的方法是有效的，但里面没有 facebook 图标。
我没有这个目录 free-brands-svg-icons，因此无法运行。我有目录：angular-fontawesome、fontawesome-common-types、fontawesome-free、fontawesome-svg-core、free-solid-svg-icons。
非常感谢，现在好了。文档很难捕捉到这样的东西。没有你的帮助，我无法解决这个问题。
错误的答案，你没有指定这是必要的：$ npm install @fortawesome/angular-fontawesome@<version> else.ts 没有找到 fontawesome 导入。
@geneb。感谢您的评论！我已添加此信息。请看我更新的答案

【解决方案2】：

不再支持您使用的库。楼主推荐使用这个： https://github.com/FortAwesome/angular-fontawesome

【讨论】：

因为它仍然可以与旧版本的 Angular 一起使用，我猜。它写在已存档的 GitHub 存储库上。但是，所有者可以做的是，确实，将其写在 NPM 页面上。

【解决方案3】：

我认为您没有在主模块中导入 FontAwesome 模块：

import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

编辑

由于您在 angular.json 中添加了 css，因此您不需要在 index.html 中添加 <link> 标记。

【讨论】：

我刚试过你的答案，还是不行。我创建了一个堆栈闪电战。 stackblitz.com/edit/angular-ubyjyj
你是对的。而且我看到不再支持回购。我写另一个答案。