Nativescript: Icon fonts not working for TabView tabs title on iOS

[sudhanshu-15]

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, looked for similar issues and solution.
Looked at: https://github.com/NativeScript/NativeScript/issues/1217
and https://github.com/NativeScript/nativescript-angular/issues/364

Tell us about the problem

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

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 3.0.2
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project)
• Plugin(s): (look for the version number in the package.json file of your
  project)
  ┌──────────────────┬─────────────────┬
  │ 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 │
  └──────────────────┴─────────────────┴
  

  Please tell us how to recreate the issue in as much detail as possible.

Create a TabView and in TabViewItem set title to use an icon font (using FontAwesome in my case). You can use the sample codes below:

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<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

[dlucidone]

@sudhanshu-15 Use Font class like this working on my end

.font-awesome-button { font-family: "FontAwesome"; font-size: 12; font-weight: normal; text-align: center; font-style: normal; }

[sudhanshu-15]

@dlucidone Thank you for the response, I tried your suggestion and it doesn't seem to work for me.
Tabview text is still not displaying icon fonts.

.mati {
    font-family: "FontAwesome";
    font-size: 12;
    font-weight: normal;
    text-align: center;
    font-style: normal;
}

[dlucidone]

@sudhanshu-15
follow this video for more help - https://www.youtube.com/watch?v=nM0ouXf23Ic&t=230s

[sudhanshu-15]

@dlucidone I know how to use icon fonts. I have been using it in the project for quite sometime now. If you check the images in the initial post you could see that in Android I am able to display the icon font on the TabView title and inside the tabview, but on iOS it is getting displayed only inside the TabView, but not on the TabView title. This issue started only after updating to {N} 3.0

[sudhanshu-15]

For better understanding here are the screenshots from my actual project:

Before updating to {N} 3.0:

You can see the TabView titles have icon fonts.

After updating to {N} 3.0:

You can see ? symbol is being displayed in place of icon font on TabView title.

[dlucidone]

@sudhanshu-15 I have no idea with the new 3.0 release

[tsonevn]

Hi @sudhanshu-15,
I tested this case on my side and was able to reproduce the issue with using iconFonts on TabView for iOS.
While testing I also found that this is a valid problem also for NativeScript 2.5, for your convenience, I am attaching both examples with NativeScript 2.5 modules and this with -3,0.

Archive-3.0.zip
Archive-2.5.zip

For further info, you could keep track on the issue.
Meanwhile, you could use iconSource property of the TabViewItem and load an image instead using icons.

For example:

<TabView id="tabViewContainer">
    <TabView.items>
        <TabViewItem title="Tab 1" iconSource="res://icon">
            <TabViewItem.view>
                <Label text="This is Label in Tab 1" />
            </TabViewItem.view>
        </TabViewItem>
        <TabViewItem title="Tab 2">
            <TabViewItem.view>
                <Label text="This is Label in Tab 2" />
            </TabViewItem.view>
        </TabViewItem>
    </TabView.items>
</TabView>

[NickIliev]

+1 from SB team

[sudhanshu-15]

@tsonevn Thanks a lot for looking into this. For my implementation I will have to wait for the bug fix but thank you for giving information about the work around.

[sudhanshu-15]

Thanks a lot for fixing the issue. The icons are now working n iOS. However there is one minor issue, the icons are not vertically centered.

The Android one seems fine and is vertically centered.

If you look at iOS it is not vertically centered

Android Tab

iOS Tab

[casche]

I've been trying to do this with {N} 3.3 and it is not working for TabViewItems (but works for buttons).

{
  "tns-ios": {
      "version": "3.3.0"
   },
   "nativescript-theme-core": "~1.0.2",
   "tns-core-modules": "~3.3.0"
}

```css
.fa {
font-family: 'FontAwesome';
color: pink;
}

Both fontawesome-webfont.ttf and fontawesome-webfont.woff are placed in app/fonts/*.

# Works (iOS 11 Simulator)

```xml
  <Button text="&#xf1ea; News" tap="{{ tapAction }}" class="fa" />

Does not work (iOS 11 Simulator)

 <TabViewItem title="&#xf1ea; News" class="fa" xmlns:news="news">

[briosheje]

Is there even an official "tutorial" on how to use the tabview with font icons? I'm seeing a whole lot of different layouts out there, and the one described in the official angular docs doesn't allow to use font icons in tab views at all (https://docs.nativescript.org/angular/code-samples/ui/tab-view), since it's suggesting to use iconSource, which is likely looking for an image source.

Despite I've integrated fontawesome and other fonts, I'm still using pngs as icons, since I didn't yet find any way to render icons in tabviews (neither in 3.2, nor in 3.3).

[tsonevn]

Hi @briosheje,
I tested the scenario with the icon font and its usage inside the TabView and everything seems to work as expected. In my sample code, I used icomoon font. For your convenience, I am attaching sample code.

HTML

<TabView class="icon" selectedIndex="0"  (selectedIndexChange)="onIndexChanged($event)" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: '&#xea90;'}">
        <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
        <ScrollView>
            <Label [text]="content" textWrap="true" class="m-15"></Label>
        </ScrollView>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Icon'}">
        <Label text="&#xea90;" textWrap="true"></Label>

        <Image class="m-t-30 m-b-15" src="res://icon" width="80" height="80"></Image>
        <Label text="NativeScript" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
    </StackLayout>
</TabView>

[tsonevn]

Hi @briosheje,
New example is provided with PR #239

[briosheje]

@tsonevn Thank you for both the post, I'll try that tomorrow with font-awesome.

Thanks for the quick answer!

[briosheje]

@tsonevn I can confirm that in 3.3 it works properly, I think that it was even working earlier, though it was not that evident that the class "icon" (or whatever icon class) was meant to be applied on the TabView element, not on the StackLayout.

The only issue I'm having now is that applying the class to the TabView applies to font-family to each component inside the TabView, which is somehow replacing some text with some icons, not sure if that's intended though.

Thanks again for the support!

[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.