NativeScript Font Icon Plugin Checklist
By this time, you likely have already had the experience of adding font icons to your web or mobile application. You can add nice graphics…
Take control of your career. Build JavaScript mobile apps.
Catch Dave Coffin, Nathan Walker, and Alex Ziskind at ngAtlanta in February 2020 for an advanced NativeScript with Angular workshop called Breathe life into mobile UX with solid architecture lessons. You can register now and take your NativeScript skills up a notch. Register here.
By this time, you likely have already had the experience of adding font icons to your web or mobile application. You can add nice graphics to spice up your interfaces and you can style the graphics with CSS, since they are just fonts. Libraries like FontAwesome and Icomoon have made this super simple; well at least for web applications. Can we say the same for NativeScript apps?
Since checklists are all the rage, I've created another checklist to help you do just that.
Adding font icons to your NativeScript app is a multi-step process on it's own. And using the nativescript-ngx-fonticon plugin will help you with quick icon name identification, but this plugin (developed by our author Nathan Walker, who has a popular Plugins course right here on NativeScripting) has a few steps of its own to follow.
Check out the checkable checklist below, and use it every time you need to implement font icons and/or the font icon plugin in your NativeScript apps.
The Checklist
Modal Component Section
- Install the nativescript-ngx-fonticon plugin
- Add Font Awesome font to project
- Add the Font Awesome CSS file to project
- Add .fa class in app.css
- Edit the Font Awesome CSS file to remove unused code
- Add import and initialization of TNSFontIconModule in app.module.ts
- Add injection of TNSFontIconService in app.component.ts
- Add import of TNSFontIconModule in consuming feature modules
-
Add Label element with the .fa class and fonticon pipe
This checklist is part of the NativeScript with Angular Pro course that’s right here on NativeScripting. In Chapter 5, of the course, I guide you through several plugins and consuming native code in NativeScript, including adding font icons, followed by an implementation of the font icon plugin.
Font Icons in NativeScript
In this preview lesson from Chapter 5, I show you how to implement steps 2-4 of the checklist. This is the bare-bones of adding font icons to your NativeScript apps.
Using the Font Icon Plugin
In this next lesson, also from Chapter 5, I show you how to implement the rest of the steps of the checklist. Here we add the font icon plugin and use it in the demo app.
Go ahead and use this checklist anytime you wish.
