Font-awesome icons not displaying correctly

Font awesome icons recently stopped displaying. They just appear as small boxes like this everywhere:

Here is the icon in this particular component:

<i></i> 

I have just tried updating Font awesome to version 5 using one their 'kits' on their website here:

This just tells you to insert this into your head tag:

<script src="" crossorigin="anonymous"></script> 

Which I've done (as I'm using Angular, I've placed this in the index.html file) but the icons are still displaying as above. What am I doing wrong here?

2 Answers

Let's look at docs how icons can be shown. So we can type like that:

<fa-icon [icon]="['far', 'square']"></fa-icon> <br> <fa-icon [icon]="['far', 'check-square']"></fa-icon> 

The complete stackblitz example can be seen here

UPDATE:

It is necessary to install:

 npm install @fortawesome/fontawesome-svg-core $ npm install @fortawesome/free-solid-svg-icons # See Compatibility table below to choose a correct version $ npm install @fortawesome/angular-fontawesome@<version> 

Your app.module.ts:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { library } from '@fortawesome/fontawesome-svg-core'; import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons'; import { faSquare as farSquare, faCheckSquare as farCheckSquare } from '@fortawesome/free-regular-svg-icons'; import { faStackOverflow, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [ BrowserModule, FormsModule, FontAwesomeModule ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { constructor() { library.add(faSquare, faCheckSquare, farSquare, farCheckSquare, faStackOverflow, faGithub, faMedium); } } 

then app.component.html

<div> <h2>Using Solid Icons</h2> <fa-icon [icon]="['fas', 'square']"></fa-icon> <br> <fa-icon [icon]="['fas', 'check-square']"></fa-icon> </div> 

FontAwesome 4.7.0 does not contain the fa-trash-alt icon.

FontAwesome 5 does contain the fa-trash-alt icon.

So if you'd include FontAwesome Version 5+ fa-trash-alt should work as expected:

<link href="" rel="stylesheet"/> <i></i>