{"id":13466669,"url":"https://github.com/NathanWalker/nativescript-fonticon","last_synced_at":"2025-03-26T00:31:18.428Z","repository":{"id":46705834,"uuid":"55356466","full_name":"NathanWalker/nativescript-fonticon","owner":"NathanWalker","description":"Use custom font icon collections seamlessly with NativeScript.","archived":true,"fork":false,"pushed_at":"2023-05-08T22:07:04.000Z","size":1655,"stargazers_count":50,"open_issues_count":21,"forks_count":47,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T20:31:59.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NathanWalker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-03T16:30:09.000Z","updated_at":"2023-05-08T22:07:18.000Z","dependencies_parsed_at":"2024-07-31T15:13:30.339Z","dependency_job_id":null,"html_url":"https://github.com/NathanWalker/nativescript-fonticon","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fonticon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fonticon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fonticon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fonticon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NathanWalker","download_url":"https://codeload.github.com/NathanWalker/nativescript-fonticon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245566096,"owners_count":20636390,"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-07-31T15:00:48.127Z","updated_at":"2025-03-26T00:31:18.016Z","avatar_url":"https://github.com/NathanWalker.png","language":"TypeScript","readme":"Source moved here for better maintainability: 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\n\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n[![Dependency Status](https://david-dm.org/NathanWalker/nativescript-fonticon/status.svg)](https://david-dm.org/NathanWalker/nativescript-fonticon#info=dependencies) [![devDependency Status](https://david-dm.org/NathanWalker/nativescript-fonticon/dev-status.svg)](https://david-dm.org/NathanWalker/nativescript-fonticon#info=devDependencies)\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.fa {\n  font-family: FontAwesome;\n}\n```\n\n* view\n```\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```\n\u003cLabel class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"\u003e\u003c/Label\u003e \n```\n\n## Install\n\n```\nnpm install nativescript-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```\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).(http://fluentreports.com/blog/?p=176).\n\n* Copy css to `app` somewhere, for example:\n\n```\napp/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* Configure your fonts and setup the converter:\n\n```\nimport * as application from 'application';\nimport {TNSFontIcon, fonticon} from 'nativescript-fonticon';\n\nTNSFontIcon.debug = true; \u003c-- Optional. Will output the css mapping to console.\nTNSFontIcon.paths = {\n  'fa': 'font-awesome.css',\n  'ion': 'ionicons.css'\n};\nTNSFontIcon.loadCss();\n\napplication.setResources( { fonticon } );\napplication.start({ moduleName: 'main-page' });\n```\n\n* Use the Converter, for example:\n\n```\n\u003cLabel class=\"fa\" text=\"{{'fa-bluetooth' | fonticon}}\"\u003e\u003c/Label\u003e \n``` \n\nDemo FontAwesome (iOS) |  Demo Ionicons (iOS)\n-------- | ---------\n![Sample1](https://cdn.filestackcontent.com/m6JyRO1fTsCHPohoZi5I?v=0) | ![Sample2](https://cdn.filestackcontent.com/jje2pehCRCeLDC8QHBmp?v=0)\n\nDemo 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### Font Awesome 5\n\nIn this case, you have to copy and import each `ttf` file and associate it with the proper class:\n\n```\n.fas {\n  font-family: Font Awesome 5 Free, fa-solid-800;\n}\n.far {\n  font-family: Font Awesome 5 Free, fa-regular-400;\n}\n```\n\nbut still you will import the `css` only once with the `fa` prefix:\n\n```\nTNSFontIcon.paths = {\n  'fa': 'font-awesome.css'\n};\n```\n\n## How about NativeScript with Angular?\n\nIf using [Angular](https://angular.io/), use this instead:\n\n* [nativescript-ng2-fonticon](https://github.com/NathanWalker/nativescript-ng2-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","funding_links":[],"categories":["Credits","Awesome {N} [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Usage","Table of Contents"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanWalker%2Fnativescript-fonticon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNathanWalker%2Fnativescript-fonticon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanWalker%2Fnativescript-fonticon/lists"}