Angular字体很棒的图标不渲染（现场尝试了其他建议）

Question

我正在尝试将删除图标添加到我的角度任务列表项目中。我使用了 ng添加 @fortawesome/angular-fontawesome 。然后，我在故障排除时使用NPM安装。我遵循了其他线程之一的指南，并清除了缓存并重新启动了服务器。我已经多次检查了我的代码，但无法弄清楚这个问题。我没有错误消息。我的页面加载，但没有图标渲染。这是我的代码：

app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { TaskComponent } from './task/task.component';
    import { TasksComponent } from './tasks/tasks.component';
    import { TaskDetailComponent } from './task-detail/task-detail.component';
    import { DatesComponent } from './dates/dates.component';
    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    import { ButtonComponent } from './components/button/button.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        TaskComponent,
        TasksComponent,
        TaskDetailComponent,
        DatesComponent,
        ButtonComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        FontAwesomeModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }`
    ````
    **app.component,html**
    ````
    <div class="content">
    <!--task section-->    
    <h1>{{ title }}</h1> 
    <!--stack overflow method-->
    <img src="/assets/images/victorian.jpg" alt="victorian house" width="450"     height="300">
    <app-tasks></app-tasks>
    
    <!-- icon assoc. with font awesome install-->
    <fa-icon [icon]="faTimes"></fa-icon>
    
    <!--due date section-->   
    <app-dates></app-dates>
    
    </div>

task-detail.component.ts

    import { Component, OnInit, Input } from '@angular/core';
    import { Task } from '../task';
    import { faTimes } from '@fortawesome/free-solid-svg-icons';
    
    @Component({
      selector: 'app-task-detail',
      templateUrl: './task-detail.component.html',
      styleUrls: ['./task-detail.component.css']
    })
    export class TaskDetailComponent implements OnInit {
      @Input() task?: Task;
      faTimes = faTimes;
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
    }

task-detail.component.ponent.html

 

   <div class="flex-container">
            <div *ngIf="task">
   
       <h2>{{task.name | uppercase}} Details </h2>
       <div><span>id: </span>{{task.id}}  <fa-icon [icon]= "faTimes"></fa-icon></div>
       <div>
         <label for="task-name">Task name: </label>
         <input id="task-name" [(ngModel)]="task.name" placeholder="name">
       </div>
   
       </div>

非常感谢！

Answer 1

检查fontawesome兼容性表并安装特定版本。

兼容表urls-

1. https://www.npmjs.com/package/@fortawesome/angular-fontawesome

运行命令 -

npm install @fortawesome/angular-fontawesome@<version>

例如，我的角度项目版本是13。 -cfemail =“ 2D4C434A58414C5F004B4243594C5A485E4240486D1D1D031C1D0355”> [email＆nbsp; proceeded]