Nativescript: [v2.0.0] Font icons in nested components don't work on iOS

[firecube]

Hi,

I have just upgraded an existing project to v2. Font icons used in TextFields don't work in nested components on iOS and instead just show as a question mark. They are fine like this on Android and they also work in iOS on top level pages.

Thanks, Simon

[NickIliev]

Issue tested and reproduced under tns 2.0.0 with icomoon.ttf
(working on Android API 19 & API 23 - and non-working on iOS 9.3)

Here are the steps to reproduce it :

// main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <ListView items="{{ glyphs }}">
        <ListView.itemTemplate>
            <StackLayout orientation="horizontal">
                <Label text="{{ icon }}" class="icon"/>
                <Label text="{{ code }}" />
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</Page>

// main-page.ts
import observable = require("data/observable");
import pages = require("ui/page");

export function pageLoaded(args: observable.EventData) {
    var page = <pages.Page>args.object;
    var viewModel = new observable.Observable();
    var glyphs = new Array<observable.Observable>();
    var charCode = 0xe903;
    for(; charCode <= 0xeaea; charCode++){
        var glyph = new observable.Observable();
        glyph.set("icon", String.fromCharCode(charCode));
        glyph.set("code", charCode.toString(16));
        glyphs.push(glyph);  
    }
    viewModel.set("glyphs", glyphs)
    page.bindingContext = viewModel;
}

// app.css
.icon {
   font-family: 'icomoon';
   font-size: 48;
}

icomoon.ttf located in app/fonts

[NickIliev]

@firecube

It appeared that iOS api for using fonts is looking for the _font name_ and not the _font file name_ .
In order for your font to appear in iOS you need to reffer with its original font name.
In the example case I have posted above this means that the file should remain as published by the creators or exactly IcoMoon-Free

Your code will work if you keep the original ffont name and change the css to the following code

.icon {
   font-family: 'IcoMoon-Free';
   font-size: 48;
}

Of course that means that in order this font to appear in Android you also need to keep the original file name exactly as the font-name : IcoMoon-Free.ttf
This way your icon fonts will work on both platforms.

[firecube]

@NickIliev

That is true but I have my font ttf file renamed as the font name already. Fonts work in iOS in top level pages but I have some custom components / widgets that I reuse on multiple pages (e.g. a side drawer) and on iOS with tns version 2.0 they only show a question mark.

The same code worked fine on tns version 1.7.

Thanks, Simon

[NickIliev]

@firecube

I have uploaded my testing app in which I have IcoMoon-Free.ttf used in RadSideDrawer component and in a sub-page as well but I was not able to reproduce your issue.
Can you please take a look at the source and let me know how to reproduce your behavour.
Here is the link to the sample app
https://github.com/NickIliev/sample-IconFontsUsage

[firecube]

@NickIliev

Sorry for the delay in getting back to you.

When I said nested page I meant a component widget. See my fork of your code at https://github.com/firecube/sample-IconFontsUsage where I have made this change. It works on Android but I don't have an access to an iPhone right now.

Are you able to run it up to confirm the issue?

Thanks, Simon

[NickIliev]

@firecube

I have tested your sample app with iOS 9.3 (iPhone 6) and everything works great.
The icon font is loaded successfully in the widget component
<Widgets:widget />

If the issue is still present at your side in your original app check your bindings for the widget and do not hesitate to contact me again!

Greetings Nick

[firecube]

That's great that it worked.

I had an existing project that we upgraded from 1.7 to 2.0 and the icons on iOS stopped working but only in our widgets / components. We had to change them all to images to get round it.

I will see if we come across this issue again.

Thanks for all your time investigating.

[peterkrieg]

Thanks so much @NickIliev ! That was indeed the fix for me using NativeScript 3.2.0.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.