在index.html中使用angular 6中的字体图标_Angular_Font Awesome_Angular Fontawesome

在index.html中使用angular 6中的字体图标

angular

在index.html中使用angular 6中的字体图标,angular,font-awesome,angular-fontawesome,Angular,Font Awesome,Angular Fontawesome,我已经成功地将加载程序添加到我的Andrula 6项目中，该项目将在初始加载时显示加载程序，直到应用程序完全加载为止。然而，我似乎无法在微调器中加载一个字体很棒的图标应用程序模块.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FontAwesomeModule } from '@fortawesome/angula

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

应用程序模块.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>

它没有错误或任何东西它只是没有显示图标？我对angular还比较陌生，所以我可能做了一些完全错误的事情

这行不通

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

因为还没有应用程序上下文

您可以像这样显示FA字体，而不需要角度组件（尚未）

我还假设您已经在

index.html

head部分中包含了FA CSS。

您是否按照以下步骤包含CSS？如果您使用的是Angular CLI，请将字体awesome CSS添加到Angular-CLI.json中的样式中。如果未使用CLI，请将样式表导入index.html文件。

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