Skip to content

Latest commit

 

History

History
executable file
·
143 lines (96 loc) · 4.17 KB

README.md

File metadata and controls

executable file
·
143 lines (96 loc) · 4.17 KB
Raw

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-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)
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:

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

How about NativeScript with Angular?

If using Angular, use this instead:

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