How do you add Font Awesome to Ionic 4

Question

There are a lot of tutorials and articles of how to include Font Awesome in an Ionic 3 project but I struggled finding any on how to add Font Awesome into an Ionic 4 project. So this poses the question, how do you add and use Font Awesome in an Ionic 4 project?

I have tried using the following tutorial without much success. I tried following the steps outlined in the following StackOverflow answer which did not work either.

Answer 1

Run the following command:

npm install --save-dev @fortawesome/fontawesome-free

Then, in angular.json append this on "styles":

{
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

Answer 2

I was racking my brain trying to get this working with Ionic 5/Angular 10 and couldn't get it working. I figured it in the end, should anyone else require it.

For Ionic 5/Angular 10

Run ng add @fortawesome/angular-fontawesome@latest in your project folder and select the icons you require.

In app.module.ts add the following:

import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; //Solid icons
import { far } from '@fortawesome/free-regular-svg-icons'; // Regular icons
import { fab } from '@fortawesome/free-brands-svg-icons'; // Brand icons

And import FontAwesomeModule to the imports declarables so it looks like this:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})

And then export a library constructor as so...

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas, far, fab);
  }
}

Go to the module you wish to use Font Awesome (e.g. mypage.module.ts) and import the FontAwesomeModule.

Finally in your HTML, e.g. mypage.page.html simply use <fa-icon icon="home"></fa-icon> to display an icon.

If you run in to any issues, make sure you stop Ionic first and run ionic serve again as this should recompile the framework.

Also take a look at https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md for a full list of the features available in its usage.