Home

Awesome

This is now simply nativescript-fonticon. Same API, just removed TNS prefix naming, see here: https://github.com/nstudio/nativescript-ui-kit/blob/main/packages/nativescript-fonticon/README.md

<hr/> ## A simpler way to use font icons with NativeScript + Angular.

Angular Style Guide MIT license Build Status

The Problem

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

.fa {
  font-family: FontAwesome;
}
<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-ngx-fonticon --save

Usage

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

app/fonts/fontawesome-webfont.ttf
.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.

app/assets/font-awesome.css

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

Use the classname prefix as the key and the css filename as the value relative to directory where your app.module.ts is, then require the css file.

Example configurations:

/* NS out of the box webpack configuration or NS6+  */
// Assuming you placed your css file in `src/app/assets/css/fa-5.css`:
TNSFontIconModule.forRoot({ fa: require("~/app/assets/css/fa-5.css") });

/* Non-webpack */
// Note that the location of the file relative to your app.module
// is what determines the path that require takes.
// This assumes that assets is a sibling folder of `app.module.ts`.
TNSFontIconModule.forRoot({ fa: require("./assets/css/fa-5.css") });
import { TNSFontIconModule } from 'nativescript-ngx-fonticon';

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		TNSFontIconModule.forRoot({
			'fa': require('~/app/assets/css/fa-5.css'),
			'ion': require('~/app/assets/css/ionicons.css')
			/*
			For non webpack, assuming the assets folder is a sibling of app.module.ts:
			'fa': require('./assets/css/fa-5.css')
			*/
		})
	]
})

When working with a new font collection, you may need to see the mapping the service provides. Passing true as seen below will cause the mapping to be output in the console to determine if your font collection is being setup correctly.

import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';
// turn debug on
TNSFontIconService.debug = true;

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		TNSFontIconModule.forRoot({
			'fa': require('~/app/assets/css/fa-5.css')
			/*
			For non webpack, assuming the assets folder is a sibling of app.module.ts:
			'fa': require('./assets/css/fa-5.css')
			*/
		})
	]
})
import { Component } from '@angular/core';

@Component({
  selector: 'demo',
  template: '<Label class="fa" [text]="'fa-bluetooth' | fonticon"></Label> '
})
export class DemoComponent {

}
Demo FontAwesome (iOS)Demo Ionicons (iOS)
Sample1Sample2
Demo FontAwesome (Android)Demo Ionicons (Android)
Sample3Sample4

How about just NativeScript without Angular?

The standard NativeScript converter is here:

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

License

MIT