# Font Awesome with Ionic 5 - Ola Dayo - Medium

By [iAmServer](https://paragraph.com/@iamserver) · 2022-01-25

---

  

![](https://storage.googleapis.com/papyrus_images/40891952d345abd5ff8f5e44dc57db09588c2b7f7aa23cad354f561a3ed478c0.png)

This is actually my first **how to do** post, so let’s enjoy it together.

If you are a familiar with [Font Awesome](https://fontawesome.com/) and also work with [Ionic framework](https://ionicframework.com/) and you are curious on how to use **Font Awesome** in **Ionic 5 Angular Version,** then this is for you.

Lets dive into it……..

**Let’s create a new ionic project**

    $ ionic start awesomeIonic --type=angular
    

![](https://storage.googleapis.com/papyrus_images/b4ce9fbc49e8a034f2c36e30d99d5f58ab4155cc1fc8886ceb13782f8837421e.png)

Select the blank starter template

    $ ionic serve
    

![](https://storage.googleapis.com/papyrus_images/9f0e4f0bbb633799fa75fe6a00abb702c2a5567b96d018cb8f41f5a08a21ab87.png)

To start app

> **_For curiosity sake, I will post my ionic info at the bottom of the page_**

Let’s dive in more by bringing the font awesome dependencies into our project

    $ npm install @fortawesome/fontawesome-svg-core
    $ npm install @fortawesome/angular-fontawesome
    $ npm install @fortawesome/free-solid-svg-icons
    $ npm install @fortawesome/free-regular-svg-icons
    $ npm install @fortawesome/free-brands-svg-icons
    

![](https://storage.googleapis.com/papyrus_images/1568d6a1405db76ba68549efd9a51d2e86e88e1a7dbf31a892fd55e04744fc0f.png)

installing font awesome dependencies

Now let’s perform how little magic

**app.module.ts**

    import { FontAwesomeModule, FaIconLibrary } from ‘@fortawesome/angular-fontawesome’;
    import { fas } from ‘@fortawesome/free-solid-svg-icons’;
    import { far } from ‘@fortawesome/free-regular-svg-icons’;
    import { fab } from ‘@fortawesome/free-brands-svg-icons’;
    

Add **FontAwesomeModule** to the imports array

Add a constructor to your AppModule class

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

Your app.module.ts should look like this

![](https://storage.googleapis.com/papyrus_images/0cd5f54114f783f0668c07e11dd243f675556a16fbee09f1bd68d8a7c63de0d3.png)

app.module.ts

So lets implement it in our page, which mine is called **TestPage**

**test.module.ts**

Just like we did in the app.module we will the FontAwesomeModule then add to the imports.

    import { FontAwesomeModule } from ‘@fortawesome/angular-fontawesome’;
    

It should look like this

![](https://storage.googleapis.com/papyrus_images/db81bbdc534719ac88422ce76af6e11d5d3d67ca37cfb5c5e6965eeb282e6ca9.png)

test.module.ts

Now lets add the **component** to the _test.page.html_

> Please note, cause this was my initial mistake too. It’s a component not just any HTML element

**test.page.html**

    <fa-icon icon="spinner"></fa-icon><!-- Solid Icons -->
    <fa-icon [icon]="['fas', 'square']"></fa-icon><!-- Regular Icons -->
    <fa-icon [icon]="['far', 'square']"></fa-icon><!-- Brand Icons -->
    <fa-icon [icon]="['fab', 'stack-overflow']"></fa-icon>
    

See [Font Awesome Icon Gallery](https://fontawesome.com/icons?d=gallery) for more icon.

Your HTML code should look like this

![](https://storage.googleapis.com/papyrus_images/c62b166220b6916d1685a9cd71329f948345d10f3d92aae71beeb3dab0a11853.png)

test.page.html

Let’s see our final product

![](https://storage.googleapis.com/papyrus_images/487f688aaa88017168b7306064ae20333c2f674f7abf61476177d9da74687654.png)

output

Ignore the nasty app LOL

Access the complete code [here](https://github.com/iAmServer/awesomeIonic5)

Follow me on Twitter/Medium @iamserverr

I will be dropping the VueJS and ReactJS version soon.

As promised —\*\* My ionic info\*\*

    Ionic:
    Ionic CLI                     : 6.3.0 (/Users/macbook/.nvm/versions/node/v11.15.0/lib/node_modules/@ionic/cli)Ionic Framework               : @ionic/angular 5.0.7
    @angular-devkit/build-angular : 0.803.26
    @angular-devkit/schematics    : 8.3.26
    @angular/cli                  : 8.3.26
    @ionic/angular-toolkit        : 2.2.0Utility:
    cordova-res (update available: 0.12.1) : 0.12.0
    native-run (update available: 1.0.0)   : 0.2.8System:
    NodeJS : v11.15.0 (/Users/macbook/.nvm/versions/node/v11.15.0/bin/node)
    npm    : 6.14.2
    OS     : macOS High Sierra
    

[The ionic team](https://medium.com/u/231a083a1e9?source=post_page-----3fcc335cd391-----------------------------------)

---

*Originally published on [iAmServer](https://paragraph.com/@iamserver/font-awesome-with-ionic-5-ola-dayo-medium)*