[Fixed] Font-awesome icons not displaying correctly


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

enter image description here

Here is the icon in this particular component:

<i class="fas fa-trash-alt fa-lg"></i>

I have just tried updating Font awesome to version 5 using one their ‘kits’ on their website here: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

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

<script src="https://kit.fontawesome.com/c61d55aa48.js" 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?


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

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

The complete stackblitz example can be seen here


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/[email protected]<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 
import { faStackOverflow, faGithub, faMedium } from 

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

  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 style="text-align:center">
  <h2>Using Solid Icons</h2>
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-icon [icon]="['fas', 'check-square']"></fa-icon>

Leave a Reply

(*) Required, Your email will not be published