This is actually my first how to do post, so let’s enjoy it together.
If you are a familiar with Font Awesome and also work with Ionic framework 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
Select the blank starter template
$ ionic serve
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
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
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
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 for more icon.
Your HTML code should look like this
test.page.html
Let’s see our final product
output
Ignore the nasty app LOL
Access the complete code here
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