Angular 不显示 Font Awesome 图标

Question

我安装了 font awesome 并将 FontAwesomeModule 添加到 app.module.ts 的导入中。我正在尝试向该模块中的组件添加图标，但它仍然说“fa-icon”不是已知元素：

"'fa-icon' 不是已知元素：

如果 'fa-icon' 是一个 Angular 组件，则验证它是该模块的一部分。
如果 'fa-icon' 是 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的“@NgModule.schemas”以禁止显示此消息。“

我看到的所有答案都是因为 FontAwesomeModule 没有添加到包含组件和图标的模块的导入中。事实并非如此，我正在寻找仍然无法识别的原因。

courses.component.html:

<div class="course">
 <h3>{{ course.title }}</h3>
 <fa-icon icon="{{ faCoffee }}"></fa-icon>
 <p>Students: {{ course.students | number }}</p>
 <p>Rating: {{ course.rating | number: ".2-2" }}</p>
 <p>Price: {{ course.price | currency: "USD":true:".2-2" }}</p>
 <p>Release Date: {{ course.releaseDate | date: "shortDate" }}</p>
 <p>Description: <span class="desc">{{ course.description | summary }}</span></p>
 <button (click)="fullDesc()" class="btn btn-primary">Learn More</button>
</div>

courses.component.ts:

import { CoursesService } from './../courses.service';
import { Component, OnInit } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {
  faCoffee = faCoffee;
  course = {
  title: "The Complete Music Course",
  rating: 4.434,
  students: 32354,
  price: 132.99,
  releaseDate: new Date(2016, 4, 1),
  description: "The Music Theory course is designed to enhance music skills and basic music fundamentals. Throughout the course of the year students will study basic notation, scales, key signatures, intervals, triads, cadences, non-chord tones, form, part-writing and analysis of a score."
}

app.module.ts:

import { SummaryPipe } from './summary.pipe';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CoursesComponent } from './courses/courses.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
declarations: [
  AppComponent,
  CoursesComponent,
  SummaryPipe
],
imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

让我们尝试重新安装它，不会花费太多时间。 https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Answer 2

将新框架添加到 Angular 应用程序后，您将必须重新启动 angular 精简版服务器。

尝试重新启动 angular 服务器并清除浏览器缓存。如果您使用的是 Chrome，请检查开发者工具中的“禁用缓存”。

Answer 3

重新启动 VSCode 解决了我的问题。

@anthony在评论中提出

Angular 不显示 Font Awesome 图标

Angular Not Display Font Awesome Icons

icons

font-awesome

typescript

angular