Source moved here for better maintainability: https://github.com/nstudio/nativescript-ui-kit/blob/main/packages/nativescript-fonticon/README.md
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.
With this plugin, you can instead reference the fonticon
by the specific classname:
<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label>
npm install nativescript-fonticon --save
FontAwesome will be used in the following examples but you can use any custom font icon collection.
.ttf
file in app/fonts
, for example:app/fonts/fontawesome-webfont.ttf
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).
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.
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' });
<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label>
Demo FontAwesome (iOS) | Demo Ionicons (iOS) |
---|---|
Demo FontAwesome (Android) | Demo Ionicons (Android) |
---|---|
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'
};
If using Angular, use this instead:
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.
Idea came from Bradley Gore's post here.