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

The easiest way for the Angular user is to write ng add @fortawesome/angular-fontawesome@latest

Answer 2

Just in case if someone deals with FontAwesome PRO. I've recently bought FontAwesome pro icons and integreted them like this:

• copy the FontAwesome webfonts folder in src/assets/
• copy the FontAwesome scss folder in src/theme/

• change the $fa-font-path in _variables.scss with assets/webfonts !default;

• add in global.scss

  @import './theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/solid.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/brands.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/light.scss';
  @import './theme/[YourDirectoryfontawesomeScss]/regular.scss';

Finally you can use them with the i tag. For example

<i class="fas fa-stack-overflow"></i>

you can find more details about the fa- classes here https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

Answer 3

To get Font Awesome working in an Ionic 4 project you can follow the steps below.

Firstly, you need to install all the npm packages, the first two are required but you can decide whether you need the solid, regular or brands icons, I will be using all of them. Go ahead and execute the following npm commands in your terminal:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/angular-fontawesome
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Once you have done that, navigate to your app.module.ts in your project and add the following:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

Depending on which font packages you installed, add the following:

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

Once they have been imported at the top of your file you will need to include the FontAwesomeModule in your imports:

.....
imports: [...., FontAwesomeModule],
.....

Once again, depending on what icons you chose you will need to add them to the Font Awesome library that was imported earlier. Add this underneath your last import (above @NgModule()):

library.add(fas, far, fab);

Then navigate to the module of the page that you would like to use the fonts in i.e. home.module.ts and then import and add the FontAwesomeModule:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
....

@NgModule({
    imports: [
        ...
        FontAwesomeModule
        ...
    ],
})

Then finally you can use the icon in that page's HTML by inserting the following where you'd like the icon:

<fa-icon [icon]="['fas', 'graduation-cap']" slot="end"></fa-icon>

You can replace, fas with the correct library i.e. far, fas & fab and then the name of the icon, which in this case was graduation-cap.

Answer 4

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 5

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.