{"id":15138036,"url":"https://github.com/nathanwalker/nativescript-ngx-fonticon","last_synced_at":"2025-09-29T06:31:15.777Z","repository":{"id":54413050,"uuid":"55306695","full_name":"NathanWalker/nativescript-ngx-fonticon","owner":"NathanWalker","description":"Use custom font icon collections seamlessly with NativeScript + Angular.","archived":true,"fork":false,"pushed_at":"2023-05-08T22:08:20.000Z","size":2755,"stargazers_count":76,"open_issues_count":25,"forks_count":39,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T07:49:44.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NathanWalker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-02T17:16:00.000Z","updated_at":"2024-06-19T00:01:41.396Z","dependencies_parsed_at":"2024-06-19T00:01:37.503Z","dependency_job_id":"0f54791b-819c-4fab-91eb-ba51737232ba","html_url":"https://github.com/NathanWalker/nativescript-ngx-fonticon","commit_stats":null,"previous_names":["nathanwalker/nativescript-ng2-fonticon"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ngx-fonticon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ngx-fonticon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ngx-fonticon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ngx-fonticon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NathanWalker","download_url":"https://codeload.github.com/NathanWalker/nativescript-ngx-fonticon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234597573,"owners_count":18857980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-26T07:04:27.838Z","updated_at":"2025-09-29T06:31:10.268Z","avatar_url":"https://github.com/NathanWalker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"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\n\u003chr/\u003e\n## A simpler way to use font icons with NativeScript + Angular.\n\n[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n[![Build Status](https://martinreinhardt-online.de/jenkins/buildStatus/icon?job=NPM/nativescript-ngx-fonticon/master)](https://martinreinhardt-online.de/jenkins/blue/organizations/jenkins/NPM%2Fnativescript-ngx-fonticon/activity)\n\n### The Problem\n\nYou can use icon fonts with NativeScript by combining a class with a unicode reference in the view:\n\n- css\n\n```css\n.fa {\n  font-family: FontAwesome;\n}\n```\n\n- view\n\n```xml\n\u003cLabel class=\"fa\" text=\"\\uf293\"\u003e\u003c/Label\u003e\n```\n\nThis works but keeping up with unicodes is not fun.\n\n### The Solution\n\nWith this plugin, you can instead reference the `fonticon` by the specific classname:\n\n```xml\n\u003cLabel class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"\u003e\u003c/Label\u003e\n```\n\n## Install\n\n```bash\nnpm install nativescript-ngx-fonticon --save\n```\n\n### Usage\n\n[FontAwesome](https://fortawesome.github.io/Font-Awesome/) will be used in the following examples but you can use any custom font icon collection.\n\n- Place font icon `.ttf` file in `app/fonts`, for example:\n\n```\napp/fonts/fontawesome-webfont.ttf\n```\n\n- Create base class in `app.css` global file, for example:\n\n```css\n.fa {\n  font-family: FontAwesome, fontawesome-webfont;\n}\n```\n\n**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).\n\n- Copy css to `app` somewhere, for example:\n\n```\napp/assets/font-awesome.css\n```\n\nThen modify the css file to isolate just the icon fonts needed. [Watch this video to better understand](https://www.youtube.com/watch?v=qb2sk0XXQDw).\n\n- Import the `TNSFontIconModule` passing a configuration with the location to the `.css` file to `forRoot`:\n\nUse 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.\n\n### Example configurations:\n\n```typescript\n/* NS out of the box webpack configuration or NS6+  */\n// Assuming you placed your css file in `src/app/assets/css/fa-5.css`:\nTNSFontIconModule.forRoot({ fa: require(\"~/app/assets/css/fa-5.css\") });\n\n/* Non-webpack */\n// Note that the location of the file relative to your app.module\n// is what determines the path that require takes.\n// This assumes that assets is a sibling folder of `app.module.ts`.\nTNSFontIconModule.forRoot({ fa: require(\"./assets/css/fa-5.css\") });\n```\n\n```typescript\nimport { TNSFontIconModule } from 'nativescript-ngx-fonticon';\n\n@NgModule({\n\tdeclarations: [\n\t\tDemoComponent,\n\t],\n\tbootstrap: [\n\t\tDemoComponent,\n\t],\n\timports: [\n\t\tNativeScriptModule,\n\t\tTNSFontIconModule.forRoot({\n\t\t\t'fa': require('~/app/assets/css/fa-5.css'),\n\t\t\t'ion': require('~/app/assets/css/ionicons.css')\n\t\t\t/*\n\t\t\tFor non webpack, assuming the assets folder is a sibling of app.module.ts:\n\t\t\t'fa': require('./assets/css/fa-5.css')\n\t\t\t*/\n\t\t})\n\t]\n})\n```\n\n- _Optional_ Configure the service with DEBUGGING on\n\nWhen 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.\n\n```typescript\nimport { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';\n// turn debug on\nTNSFontIconService.debug = true;\n\n@NgModule({\n\tdeclarations: [\n\t\tDemoComponent,\n\t],\n\tbootstrap: [\n\t\tDemoComponent,\n\t],\n\timports: [\n\t\tNativeScriptModule,\n\t\tTNSFontIconModule.forRoot({\n\t\t\t'fa': require('~/app/assets/css/fa-5.css')\n\t\t\t/*\n\t\t\tFor non webpack, assuming the assets folder is a sibling of app.module.ts:\n\t\t\t'fa': require('./assets/css/fa-5.css')\n\t\t\t*/\n\t\t})\n\t]\n})\n```\n\n- Setup your component\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'demo',\n  template: '\u003cLabel class=\"fa\" [text]=\"'fa-bluetooth' | fonticon\"\u003e\u003c/Label\u003e '\n})\nexport class DemoComponent {\n\n}\n```\n\n| Demo FontAwesome (iOS)                                                | Demo Ionicons (iOS)                                                   |\n| --------------------------------------------------------------------- | --------------------------------------------------------------------- |\n| ![Sample1](https://cdn.filestackcontent.com/m6JyRO1fTsCHPohoZi5I?v=0) | ![Sample2](https://cdn.filestackcontent.com/jje2pehCRCeLDC8QHBmp?v=0) |\n\n| Demo FontAwesome (Android)                                            | Demo Ionicons (Android)                                               |\n| --------------------------------------------------------------------- | --------------------------------------------------------------------- |\n| ![Sample3](https://cdn.filestackcontent.com/lNCptx2aQisOa6p27iqb?v=0) | ![Sample4](https://cdn.filestackcontent.com/2ajSF92uQDusI37fEvQA?v=0) |\n\n## How about just NativeScript without Angular?\n\nThe standard NativeScript converter is here:\n\n- [nativescript-fonticon](https://github.com/NathanWalker/nativescript-fonticon)\n\n## Why the TNS prefixed name?\n\n`TNS` stands for **T**elerik **N**ative**S**cript\n\niOS uses classes prefixed with `NS` (stemming from the [NeXTSTEP](https://en.wikipedia.org/wiki/NeXTSTEP) days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/\n\nTo avoid confusion with iOS native classes, `TNS` is used instead.\n\n## Credits\n\nIdea came from [Bradley Gore](https://github.com/bradleygore)'s [post here](http://www.blog.bradleygore.com/2016/03/28/font-icons-in-nativescript/).\n\n## Contributors\n\n- [NathanaelA](https://github.com/NathanaelA)\n\n# License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanwalker%2Fnativescript-ngx-fonticon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanwalker%2Fnativescript-ngx-fonticon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanwalker%2Fnativescript-ngx-fonticon/lists"}