Icon fonts in Android companion app

[Ian]

Hi.

If I use FontAwesome (or any icon font) in a NativeScript app (v1.4.3 or v1.5), the icons display fine using the iOS companion app. However, in the Android companion app every icon appears as a symbol that resembles a cross inside a square.

Does the Android companion app support icon fonts?

Regards, Ian

[Kaloyan]

Hi Ian,

The AppBuilder Companion app for Android should be able to visualize different fonts (like FontAwesome) without issues. This said, the first thing to check in your scenario would be the icon paths and if they are relative to the javascript file in which you are referring to them. For that purpose, you can use __filename as shown here.

Please, let us know if the above is not the case and we will assist you further.

Regards,
Kaloyan
Telerik

 

 

[Ian]

Hi Kaloyan,

Thanks for the reply although I'm not sure what the reference to 'webpack' is?

If it helps, I've put together a very simple {N} app which just displays two FontAwesome icons (an up arrow and down arrow) in the top left-hand corner of the screen. It works fine using the iOS companion app but with the Android companion app I just get two 'cross-inside-a-box' symbols. Here's the code:

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" actionBarHidden="true">
  <StackLayout>
    <Label text="&#xf062;&#xf063;" class="awesome"/>
  </StackLayout>
</Page>

 

main-page.js

No code

 

app.js

var application = require("application");
var fonts = require("ui/styling/font");
application.mainModule = "main-page";
application.cssFile = "./app.css";
if (application.ios) {
    fonts.ios.registerFont("fontawesome-webfont.ttf");
}
application.start();

 

app.css

.awesome {
  font-family: 'FontAwesome';
  font-size: 24;
}

Hopefully this will allow you to re-create the problem.

Thanks, Ian

[Tina Stancheva]

Hello Ian,

Thank you for the sample code. I want to apologize that its taking us a while to test and address this issue. I haven't yet tried the sample but I wanted to let you know that I will give it a try today and I will let you know as soon as I have some results. If I manage to replicate the issue, I will let you know if there is a solution you can apply.

I will update this thread tomorrow at the latest.

Regards,
Tina Stancheva
Telerik

 

 

[Ian]

Hi Tina,

Did you manage to replicate the issue I reported with the suggested {N} test application?

Best regards, Ian

[Tina Stancheva]

Hi Ian,

I am sorry for the delay - I did reproduce the issue. It was caused by the fact that in Android NativeScript automatically loaded the fonts from the package assets. Since the companion app doesn't put the loaded project files in its assets, the fonts couldn't be loaded. We further discussed this issue internally as this also means that font files in Android cannot be liveSynced with AppBuilder. The discussion led to this fix in NativeScript.

We also incorporated the fix in the companion app - can you please download its latest version and give it a try. Only, please make sure that if you're using the file fontawesome-webfont.ttf, then app.css defines the following style rule:

.awesome {
  font-family: 'fontawesome-webfont';
  font-size: 24;
}

Let me know if that works.

Regards,
Tina Stancheva
Telerik

 

 

[Ian]

Hi Tina,

I downloaded the latest Android companion app and I can confirm that this version does now correctly display icon fonts in {N} apps. I tried both FontAwesome and a custom icon font created using icomoon and both worked perfectly.

Thanks for all your help. 

Best regards, Ian