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

Answer 1

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 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.