Font-awesome icons not displaying correctly

Question

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

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?

Thanks for your response. Is this not exactly the same way I already have it? — Bail P, Mar 25 '21 at 19:37
Feel free to ask any question. If my reply was helpful, you can mark it as an answer to simplify the future search of users. [How does accepting an answer work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — StepUp, Mar 26 '21 at 10:45

score 2 · Answer 1 · answered Mar 25 '21 at 19:33

2

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<i class="fas fa-trash-alt fa-lg"></i>

answered Mar 25 '21 at 19:33

0stone0

34,288
4
39
64

Thanks for your response. I've added the link you provided above to the head tag in my index.html file and the same issue still persists (icons being displayed as above in the image) – Bail P Mar 25 '21 at 19:37
Since you're using Angul, try using the `fa` instead of `fas`. Something like: `` – 0stone0 Mar 25 '21 at 19:39
https://stackoverflow.com/questions/47705834/font-awesome-icons-not-loading-on-angular4-project – 0stone0 Mar 25 '21 at 19:39
I've tried this as well and it still as the same result – Bail P Mar 25 '21 at 19:41

StepUp · Accepted Answer · 2021-03-26T06:58:02.953

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

@BailP I am glad that it helped to you:) – StepUp Mar 26 '21 at 15:16 — StepUp, Mar 26 '21 at 15:16

Font-awesome icons not displaying correctly

2 Answers2