Icon fonts in Android companion app

7 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 01 Dec 2015 Link to this post

    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

  2. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 04 Dec 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 04 Dec 2015 in reply to Kaloyan Link to this post

    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

  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 09 Dec 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Dec 2015 in reply to Tina Stancheva Link to this post

    Hi Tina,

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

    Best regards, Ian

  6. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Dec 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  7. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 23 Dec 2015 in reply to Tina Stancheva Link to this post

    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

Back to Top