Question

我是Angular的新手，所以请多包涵。我正在尝试在我的项目中使用FontAwesome。最初我是通过CDN加载的，但是我想正确使用它。因此，我已经将FontAwesomeModule导入了我的WidgetModule中。看起来像这样：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { WidgetRoutingModule } from './widget-routing.module';
import { SharedModule } from '@pyb-shared/shared.module';
import { WidgetComponent } from './widget.component';
import { ScenariosComponent } from './scenarios/scenarios.component';
import { QuestionsComponent } from './questions/questions.component';
import { AnswersComponent } from './answers/answers.component';
import { ResultsComponent } from './results/results.component';

import { AnswerButtonComponent } from './shared/answer-button/answer-button.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoadingButtonComponent } from './shared/loading-button/loading-button.component';
import { MainProductComponent } from './shared/main-product/main-product.component';
import { MatchesComponent } from './shared/matches/matches.component';
import { ProductComponent } from './shared/product/product.component';
import { QuestionSplitComponent } from './shared/question-split/question-split.component';

import { AnswersService } from './answers/answers.service';
import { QuestionsService } from './questions/questions.service';
import { ResultsService } from './results/results.service';
import { ScenariosService } from './scenarios/scenarios.service';

import { AnswerMatchService } from './shared/answer-match.service';
import { DuplicateService } from './shared/duplicate.service';
import { FilterService } from './shared/filter.service';
import { FormulaService } from './shared/formula.service';
import { MatchesService } from './shared/matches.service';
import { PickService } from './shared/pick.service';
import { QuestionSplitService } from './shared/question-split/question-split.service';
import { StateService } from './shared/state.service';
import { WidgetService } from './widget.service';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';

@NgModule({
  imports: [
    CommonModule,
    WidgetRoutingModule,
    SharedModule,
    FontAwesomeModule
  ],
  declarations: [
    WidgetComponent,
    ScenariosComponent,
    QuestionsComponent,
    AnswersComponent,
    ResultsComponent,

    AnswerButtonComponent,
    HeaderComponent,
    LoadingButtonComponent,
    MainProductComponent,
    MatchesComponent,
    ProductComponent,
    QuestionSplitComponent
  ],
  providers: [
    AnswersService,
    QuestionsService,
    ResultsService,
    ScenariosService,

    AnswerMatchService,
    DuplicateService,
    FilterService,
    FormulaService,
    MatchesService,
    PickService,
    QuestionSplitService,
    StateService,
    WidgetService
  ]
})
export class WidgetModule {
  constructor() {
    console.log('WidgetModule loaded.');
    library.add(faSquare, faCheckSquare);
  }
}

我想在组件上显示两个图标，因此您可以在上面的模块中看到我添加了 faSquare 和 faCheckSquare 。在我的组件（称为 ScenariosComponent ）中，我具有以下范围：

<span class="fas fa-square"></span>

通过我上面提供的链接，然后进行以下查看：

https://github.com/FortAwesome/angular-fontawesome

看起来应该可以。我导入了 FontAwesomeModule ， ScenariosComponent 具有 WidgetModule 作为其父模块，因此它应该可以正常工作。根据这一行：

添加到库中的图标将可用于其父模块也导入FontAwesomeModule的任何其他组件。

我确实在我的模块中设置了我的库。至少在我的理解中，哪个应该在该模块中起作用。

我这样做正确吗？

Answer 1

如果您想使用angular-fontawesome，则必须遵循他们的指南。您的实现存在一些问题。

第一个问题在这里：

import { faSquare, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';

您要从FortAwesome的专业版@fortawesome/pro-solid-svg-icons导入。

您应该是从@fortawesome/free-solid-svg-icons导入的：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';

然后在您的AppModule中：

export class AppModule {
  constructor() {
    library.add(faSquare, faCheckSquare);
  }
}

第二个问题是《 angular-fontawesome指南》中的内容，看来您必须将其用作组件： fa-icon ，其中有一个{{1 }}属性 @Input ，您必须在其中提供要应用于它们的类的名称。

类似这样的东西：

[icon]

这是您推荐的Sample StackBlitz。

FontAwesome无法使用跨度与Angular一起使用

1 个答案: