角字体不渲染图标(在现场尝试了其他建议)

Question

我试图添加一个删除图标到我的角度任务列表项目。我用过ng add @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.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
2. https://github.com/FortAwesome/angular-fontawesome

执行命令-

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

例如，我的

项目版本是13，所以我使用了这个字体版本npm install @fortawesome/angular-fontawesome@0.10.x

。