Font awesome icons loading late in Angular 4 app

1
votes

I'm using an spinning Font awesome icon in the index.html of an Angular application while it loads the main component. The code is:

<app-root>
  <div style="width: 100%; padding-top: 50px; text-align: center">
    <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
    Loading...
    <span class="sr-only">Loading...</span>
  </div>
</app-root>

The problem is that, sometimes, it seems that the app doesn't load the Font awesome CSS and it looks like this:

Angular not loading CSS icon

Right now, I'm loading the Font Awesome CSS in the [styles] section of the .angular-cli.json file. But I included it in the app index.html file and the result is the same.

Is there any way I can fix this? Thanks!

1
angularfont-awesome

1 Answers

1
votes

Try to load your icons from a faster CDN directly in your head and see if it's help. add in your head tag :

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">