角不显示字体

Question

我已经安装了超赞的字体，并将FontAwesomeModule添加到app.module.ts的导入中。我试图在这个模块中添加一个图标到组件中，它仍然说“fa-图标”不是一个已知的元素：

“‘fa-图标’不是已知的元素：

如果‘fa-图标’是一个角分量，则验证它是该模块的一部分。如果‘fa-图标’是组件，则

1. 如果‘fa-图标’是一个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

一旦您添加了一个新的框架到角应用程序，您将不得不重新启动角lite服务器。

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

​

​

Answer 2

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

Answer 3

重启VSCode解决了我的案子的问题。

正如@anthony在评论中提议的那样