A simpler way to use font icons with NativeScript

The Problem

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

• CSS

.fa {
  font-family: FontAwesome;
}

• view

<Label class="fa" text="\uf293"></Label>

This works but keeping up with unicodes is not fun.

The Solution

With this plugin, you can instead reference the fonticon by the specific classname:

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label> 

Install

npm install @nativescript-community/fonticon --save

Usage

FontAwesome will be used in the following examples but you can use any custom font icon collection.

• Place font icon .ttf file in app/fonts, for example:

app/fonts/fontawesome-webfont.ttf

• Create base class in app.css global file, for example:

.fa {
  font-family: FontAwesome, fontawesome-webfont;
}

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

• Copy css to app somewhere, for example:

app/font-awesome.css

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

• Configure your fonts and setup the converter:

import * as application from '@nativescript/core/application';
import {FontIcon, fonticon} from '@nativescript-community/fonticon';

FontIcon.debug = true; <-- Optional. Will output the css mapping to console.
FontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
FontIcon.loadCss();

application.setResources( { fonticon } );
application.run({ moduleName: 'main-page' });

• Use the Converter, for example:

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label> 

Demo FontAwesome (iOS) | Demo Ionicons (iOS) -------- | --------- |

Demo FontAwesome (Android) | Demo Ionicons (Android) -------- | ------- |

Font Awesome 5

In this case, you have to copy and import each ttf file and associate it with the proper class:

.fas {
  font-family: Font Awesome 5 Free, fa-solid-800;
}
.far {
  font-family: Font Awesome 5 Free, fa-regular-400;
}

but still you will import the css only once with the fa prefix:

FontIcon.paths = {
  'fa': 'font-awesome.css'
};

How about NativeScript with Angular?

If using Angular, use this instead:

• nativescript-ng2-fonticon

Credits

Idea came from Bradley Gore's post here.

Contributors

• NathanaelA

License

MIT