Skip to content
This repository has been archived by the owner on May 8, 2023. It is now read-only.

Use custom font icon collections seamlessly with NativeScript.

Notifications You must be signed in to change notification settings

NathanWalker/nativescript-fonticon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Source moved here for better maintainability: https://github.com/nstudio/nativescript-ui-kit/blob/main/packages/nativescript-fonticon/README.md


## 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

About

Use custom font icon collections seamlessly with NativeScript.

Resources

Stars

Watchers

Forks

Packages

No packages published