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

[Nativescript-Vue] Font Awesome 5, it show [Question Mark] #14

@youyi1314

Description

@youyi1314

Main.js:

// i use import show JS ERROR SyntaxError: Importing binding name 'TNSFontIcon' is not found.

const {TNSFontIcon, fonticon} = require('nativescript-fonticon'); 
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
    'fa': './font-awesome.css'
};
TNSFontIcon.loadCss();

Vue:

<Label class="fa">{{'fa-yahoo' | fonticon}} Search</Label>

fontawesome ttf file path:
app/fonts/webfont-fontawesome.ttf

fontawesome all.css path:
app/font-awesome.css

Editted:

@font-face {
  font-family: 'Font Awesome 5 Brands, fa-brands-400';
  font-style: normal;
  font-weight: normal;
  src: url("./fonts/fa-brands-400.ttf") format("truetype"); }

.fab {
  font-family: 'Font Awesome 5 Brands, fa-brands-400'; }
@font-face {
  font-family: 'Font Awesome 5 Free, fa-regular-400';
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/fa-regular-400.ttf") format("truetype"); }

.far {
  font-family: 'Font Awesome 5 Free, fa-regular-400';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free, fa-solid-900';
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/fa-solid-900.ttf") format("truetype"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free, fa-solid-900';
  font-weight: 900; }

tns run ios console::

...
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-table-tennis: \\uf45d'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tablet: \\uf10a'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tablet-alt: \\uf3fa'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tablets: \\uf490'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tachometer-alt: \\uf3fd'
...

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions