Nativescript: Font Icons not working.

[aranmohyeddin]

Environment

  "nativescript": {
    "id": "org.nativescript.application",
    "tns-ios": {
      "version": "6.0.1"
    },
    "tns-android": {
      "version": "6.0.0"
    }
  },
  "dependencies": {
    "@vue/devtools": "^5.1.1",
    "nativescript-fonticon": "^2.0.0",
    "nativescript-socketio": "^3.3.1",
    "nativescript-toasty": "^1.4.0",
    "nativescript-vue": "^2.0.0",
    "nativescript-vue-devtools": "^1.2.0",
    "tns-core-modules": "6.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "1.0.1",
    "nativescript-vue-template-compiler": "^2.0.0",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.1.0",
    "vue-loader": "^15.2.6",
    "webpack": "^4.16.4",
    "webpack-bundle-analyzer": "~2.13.1",
    "webpack-cli": "^3.1.0"
  }

Describe the bug

I do exactly as said in here: https://docs.nativescript.org/ui/icon-fonts

Expected behavior
See some icons.

Here is my exact template:

<template>
  <Page>
    <StackLayout backgroundColor="#3c495e">
      <label text="first" height="70" backgroundColor="#43b883" />
      <label text="third" height="70" backgroundColor="#1c6b48" />
      <label text="&#xf019;" class="far"></label>
      <label color="red" text="&#xf39e;" class="fab"></label>
      <label class="fas" textWrap="true">
        <FormattedString>
          <span color="blue" text="&#xf053;" fontAttributes="Bold"></span>
        </FormattedString>
      </label>
      <label text="&#xe904;" class="ico"></label>
      <label text="second" height="70" backgroundColor="#289062" />
    </StackLayout>
  </Page>
</template>

Here is my app.css:

* {
  color: darkgreen;
}
.far {
    font-family: "Font Awesome 5 Free", "fa-regular-400";
}

.fab {
    font-family: "Font Awesome 5 Brands", "fa-brands-400";
}

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

.ico {
    font-family: "IcoMoon-Free";
}

I do

rm -r platforms 
tns run android --bundle 

I get in my android phone:
A light green bar
a dark green bar
darkgreen text 
red text 
blue text 
darkgreen text 
a green bar

I've been busy with this for a 4 hours now. My whole day is ruined I also tried the fonticon plugin etc. nothing works my heart is broken :(

[tsonevn]

Hi @aranmohyeddin,
In your case, you should use text.decode property for displaying the icons. For example:

<Label text.decode="&#xf019;" class="far"></Label>

For any another {N} Vue related issues, please use https://github.com/nativescript-vue/nativescript-vue/issues repository. For a questions, you can use our SO thread here.

[domsen123]

Hi @aranmohyeddin,
In your case, you should use text.decode property for displaying the icons. For example:

<Label text.decode="&#xf019;" class="far"></Label>

For any another {N} Vue related issues, please use https://github.com/nativescript-vue/nativescript-vue/issues repository. For a questions, you can use our SO thread here.

can you tell me, how I can set this dynamic? If I use :text.decode="text", this wont work :(

[jsuria]

Hi @aranmohyeddin,
In your case, you should use text.decode property for displaying the icons. For example:

<Label text.decode="&#xf019;" class="far"></Label>

For any another {N} Vue related issues, please use https://github.com/nativescript-vue/nativescript-vue/issues repository. For a questions, you can use our SO thread here.

can you tell me, how I can set this dynamic? If I use :text.decode="text", this wont work :(

Same here. The sample solution doesn't work for me.