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-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 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

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

application.setResources( { fonticon } );
application.start({ 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:

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

How about NativeScript with Angular?

If using Angular, use this instead:

• nativescript-ng2-fonticon

Why the TNS prefixed name?

TNS stands for Telerik NativeScript

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old): https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

To avoid confusion with iOS native classes, TNS is used instead.

Credits

Idea came from Bradley Gore's post here.

Contributors

• NathanaelA

License

MIT