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.resources['fonticon'] = 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)

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