2

I have successfully added a loader to my andular 6 project that will show the loader upon initial load until the app fully loads. I however cant seem to get a font awesome icon to load inside the spinner.

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>

It doesn't error or anything it just doesn't show the icon? I'm fairly new to angular so i may be doing something completely wrong.

mwilkerson
  • 1,374
  • 10
  • 12
Charles L.
  • 1,844
  • 2
  • 34
  • 56
  • 1
    Did you follow these steps for including the CSS? If you're using Angular CLI, add the font-awesome CSS to styles inside the angular-cli.json. If you're not using the CLI, import the stylesheet to your index.html file. – Jordan.J.D May 25 '18 at 16:52

1 Answers1

5

This wont work

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

as there is no app context yet.

You can display FA fonts like this, without angular components (yet)

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

I also assume that you have incuded FA CSS in index.html head section.

Antoniossss
  • 31,590
  • 6
  • 57
  • 99