在 index.html 中使用 Angular 6 中的字体真棒图标答案

【问题标题】：Using font-awesome icons in angular 6 inside index.html在 index.html 中使用 Angular 6 中的字体真棒图标
【发布时间】：2018-11-05 01:31:44
【问题描述】：

我已成功地将加载程序添加到我的 andular 6 项目中，它将在初始加载时显示加载程序，直到应用程序完全加载。然而，我似乎无法在微调器中加载一个很棒的字体图标。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

import { AppComponent } from './app.component';

library.add(fab);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/index.html

<body>
  <abe-root>

    <div class="app-loading">
      <div class="logo"><fa-icon [icon]="['fab', 'angular']"></fa-icon></div>
      <svg class="spinner" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
      </svg>
    </div>

  </abe-root>
</body>

它没有错误或只是没有显示图标？我对角度相当陌生，所以我可能做错了。

【问题讨论】：

您是否按照这些步骤来包含 CSS？如果您使用的是 Angular CLI，请将 font-awesome CSS 添加到 angular-cli.json 中的样式中。如果您不使用 CLI，请将样式表导入您的 index.html 文件。

标签： angular font-awesome angular-fontawesome

【解决方案1】：

这行不通

  <div class="logo"><fa-icon [icon]="['fab', 'angular']"></fa-icon></div>

因为还没有应用上下文。

你可以像这样显示 FA 字体，没有角组件（还）

<i class="fa fa-angular"></i>

我还假设您在 index.html 头部部分中包含了 FA CSS。

【讨论】：