https://github.com/NathanWalker/nativescript-fonticon
Use custom font icon collections seamlessly with NativeScript.
https://github.com/NathanWalker/nativescript-fonticon
Last synced: 11 months ago
JSON representation
Use custom font icon collections seamlessly with NativeScript.
- Host: GitHub
- URL: https://github.com/NathanWalker/nativescript-fonticon
- Owner: NathanWalker
- Archived: true
- Created: 2016-04-03T16:30:09.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-05-08T22:07:04.000Z (over 2 years ago)
- Last Synced: 2024-10-29T20:31:59.319Z (over 1 year ago)
- Language: TypeScript
- Size: 1.58 MB
- Stars: 50
- Watchers: 5
- Forks: 47
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-nativescript - Font Icons - A simpler way to use font icons with NativeScript + Angular2.. (Awesome {N} [](https://github.com/sindresorhus/awesome) / Table of Contents)
README
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
[](http://opensource.org/licenses/MIT)
[](https://david-dm.org/NathanWalker/nativescript-fonticon#info=dependencies) [](https://david-dm.org/NathanWalker/nativescript-fonticon#info=devDependencies)
### 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
```
```
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:
```
```
## Install
```
npm install nativescript-fonticon --save
```
### Usage
[FontAwesome](https://fortawesome.github.io/Font-Awesome/) 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](https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L8). 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).(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](https://www.youtube.com/watch?v=qb2sk0XXQDw).
* 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:
```
```
Demo FontAwesome (iOS) | Demo Ionicons (iOS)
-------- | ---------
 | 
Demo FontAwesome (Android) | Demo Ionicons (Android)
-------- | -------
 | 
### 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](https://angular.io/), use this instead:
* [nativescript-ng2-fonticon](https://github.com/NathanWalker/nativescript-ng2-fonticon)
## Why the TNS prefixed name?
`TNS` stands for **T**elerik **N**ative**S**cript
iOS uses classes prefixed with `NS` (stemming from the [NeXTSTEP](https://en.wikipedia.org/wiki/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](https://github.com/bradleygore)'s [post here](http://www.blog.bradleygore.com/2016/03/28/font-icons-in-nativescript/).
## Contributors
- [NathanaelA](https://github.com/NathanaelA)
# License
[MIT](/LICENSE)