@flypapertech/nativescript-fonticon
by flypapertech | v3.0.0
Use custom font icon collections seamlessly with NativeScript.
npm i --save @flypapertech/nativescript-fonticon

A simpler way to use font icons with NativeScript

MIT license Dependency Status devDependency Status

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)
Sample1 Sample2
Demo FontAwesome (Android) Demo Ionicons (Android)
Sample3 Sample4

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:

Credits

Idea came from Bradley Gore's post here.

Contributors

License

MIT