FontAwesome 无法使用跨度 Angular
FontAwesome not working with Angular using spans
我是 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>
来自我上面提供的link,并查看这个:
https://github.com/FortAwesome/angular-fontawesome
看起来应该可以。
我导入了 FontAwesomeModule,ScenariosComponent 有 WidgetModule 作为它的父模块,所以它应该只是工作。
根据这一行:
Icons added to the library will be available to any other component whose parent module also imports FontAwesomeModule.
而且我确实在我的模块中设置了我的库。哪个应该在该模块中工作,至少在我看来是这样。
我这样做对吗?
如果您想使用 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
有一个 @Input
属性 [icon]
,您必须向其中提供您想要的 class(es) 的名称适用于他们。
像这样:
<div style="text-align:center">
<fa-icon [icon]="['fas', 'square']"></fa-icon>
<br>
<fa-icon [icon]="['fas', 'check-square']"></fa-icon>
</div>
这里有一个 Sample StackBlitz 供您参考。
我是 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>
来自我上面提供的link,并查看这个:
https://github.com/FortAwesome/angular-fontawesome
看起来应该可以。 我导入了 FontAwesomeModule,ScenariosComponent 有 WidgetModule 作为它的父模块,所以它应该只是工作。 根据这一行:
Icons added to the library will be available to any other component whose parent module also imports FontAwesomeModule.
而且我确实在我的模块中设置了我的库。哪个应该在该模块中工作,至少在我看来是这样。
我这样做对吗?
如果您想使用 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
有一个 @Input
属性 [icon]
,您必须向其中提供您想要的 class(es) 的名称适用于他们。
像这样:
<div style="text-align:center">
<fa-icon [icon]="['fas', 'square']"></fa-icon>
<br>
<fa-icon [icon]="['fas', 'check-square']"></fa-icon>
</div>
这里有一个 Sample StackBlitz 供您参考。