[![Ola Dayo](https://miro.medium.com/fit/c/56/56/1\*qC82Z15Fo3JCE-FjltHEzw.jpeg)](https://medium.com/@iamserverr?source=post_page-----3fcc335cd391-----------------------------------) ![](https://miro.medium.com/max/1400/1\*8rKmoJnq4f5uzjOrDjd7PA.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://miro.medium.com/max/1400/1\*w1wk8NG4l00Alta4ZakoTQ.png) Select the blank starter template $ ionic serve ![](https://miro.medium.com/max/1036/1\*mOpE\_4lXhksMU5NYutvaGQ.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://miro.medium.com/max/1400/1\*VOfD47UYUOBj23W-qIM7iA.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://miro.medium.com/max/1400/1\*FuyJ51Waz9VmHvn89yyKbw.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://miro.medium.com/max/1400/1\*S8mhiBrN8h_j6KyvPeP_Hg.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**

See [Font Awesome Icon Gallery](https://fontawesome.com/icons?d=gallery) for more icon. Your HTML code should look like this ![](https://miro.medium.com/max/1400/1\*rt6CwvJtYgmFPAdTqfrXng.png) test.page.html Let’s see our final product ![](https://miro.medium.com/max/700/1\*bb7ekPOefB6paP8hM4cFYg.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-----------------------------------)

iAmServer

iAmServer

Font Awesome with Ionic 5 - Ola Dayo - Medium