Icon fonts not working for TabView tabs title on iOS


#1

Not able to display icon fonts on TabView tabs title in iOS after updating to NS 3.0 using Typescript(No Angular). Icon fonts are working fine in Android tabview.

platform(s)

iOS

Veersion info:

  • CLI: 3.0.2
    ┌──────────────────┬─────────────────┬
    │ Component │ Current version │ Latest version │ Information │
    │ nativescript │ 3.0.2 │ 3.0.2 │ Up to date │
    │ tns-core-modules │ 3.0.1 │ 3.0.1 │ Up to date │
    │ tns-android │ 3.0.1 │ 3.0.1 │ Up to date │
    │ tns-ios │ 3.0.1 │ 3.0.1 │ Up to date │
    └──────────────────┴─────────────────┴

Issue can be recreated by creating a TabView and in TabViewItem setting title to use an icon font (using FontAwesome in my case). You can use the sample codes below:

Code

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="Icon Font Test" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <TabView tabTextColor="red" androidSelectedTabHighlightColor="red" selectedTabTextColor="green" loaded="mainContentLoaded" id="tabView1">
         <TabView.items>
            <TabViewItem title="&#xf003; All" class="mati">
              <TabViewItem.view>
                <Label horizontalAlignment="center" text="&#xf003;" class="mati"/>
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf0a2; Notifications" class="mati">
              <TabViewItem.view>
                <Label horizontalAlignment="center" text="&#xf0a2;" class="mati"/>
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf044; Requests" class="mati">
              <TabViewItem.view>
                <Label horizontalAlignment="center" text="&#xf044;" class="mati"/>
              </TabViewItem.view>
            </TabViewItem>
          </TabView.items>
    </TabView>
</Page>
.btn {
    font-size: 18;
}
 
.mati {
    font-family: fontawesome, FontAwesome;
}

Images for reference:

on iOS


on Android


#2

Hi ssiddh,

Did you find a resolution to this problem? I am having the same problem with NS 2.5.1 on several iOS devices.

David


#3

In iOS your font file should be named exactly as the font name
:point_up_2: make note of this as before I had problem where icons where showing on Android but not iOS because of this


#4

I don’t think customizing fonts of TabViewItem is supported in iOS. You may have to use images only.


#5

Update: I was checking the TabView code for iOS, it seems font family has to be applied for TabView instead of TabViewItem. I believe they will be moving it to TabViewItem soon based on their comments here.

So in the above example if you just apply the class mati to TabView the same code should work.


#6

So my issue is not with TabViews, I am using FontAwesome with Labels. How should the file be named and what should my css have?

I have fontawesome-webfont.ttf as a file and my css is:

.fa {
    font-family: "FontAwesome", "fontawesome-webfont";
    vertical-align: center;
}

Thanks,

David


#7

Just the same example from @ssiddh works on my end, keeping the font file name same as you mentioned.


#8

The issue with icon fonts was fixed with release 3.2.0 of Nativescript.
Follow this git issue for more details:

Note:
I renamed my fontawesome file to fontawesome.ttf and declared in CSS as:

.fontawesome {
    font-family: fontawesome, FontAwesome;
}

PS: There is still an issue with icon fonts on iOS TabView, which is the icon fonts are not vertically centered. You can find the details here: https://github.com/NativeScript/NativeScript/issues/4831