{"id":19220039,"url":"https://github.com/nativescript-community/fonticon","last_synced_at":"2025-05-13T01:09:14.343Z","repository":{"id":57129387,"uuid":"177740598","full_name":"nativescript-community/fonticon","owner":"nativescript-community","description":"Use custom font icon collections seamlessly with NativeScript.","archived":false,"fork":false,"pushed_at":"2021-04-02T05:55:36.000Z","size":1793,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-13T01:09:02.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"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/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T07:59:01.000Z","updated_at":"2022-07-03T19:33:23.000Z","dependencies_parsed_at":"2022-08-31T19:23:06.218Z","dependency_job_id":null,"html_url":"https://github.com/nativescript-community/fonticon","commit_stats":null,"previous_names":["akylas/nativescript-fonticon"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonticon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonticon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonticon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Ffonticon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/fonticon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851069,"owners_count":21973674,"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-11-09T14:33:45.683Z","updated_at":"2025-05-13T01:09:14.307Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 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/nativescript-community/fonticon/status.svg)](https://david-dm.org/nativescript-community/fonticon#info=dependencies) [![devDependency Status](https://david-dm.org/nativescript-community/fonticon/dev-status.svg)](https://david-dm.org/nativescript-community/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-community/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```typescript\nimport * as application from '@nativescript/core/application';\nimport {FontIcon, fonticon} from '@nativescript-community/fonticon';\n\nFontIcon.debug = true; \u003c-- Optional. Will output the css mapping to console.\nFontIcon.paths = {\n  'fa': 'font-awesome.css',\n  'ion': 'ionicons.css'\n};\nFontIcon.loadCss();\n\napplication.setResources( { fonticon } );\napplication.run({ moduleName: 'main-page' });\n```\n\n* Use the Converter, for example:\n\n```xml\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```css\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```typescript\nFontIcon.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## 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%2Fnativescript-community%2Ffonticon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Ffonticon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Ffonticon/lists"}