Nativescript-angular: icon font codes in TabView *tabItem directives don't work

[toniopelo]

There is what I want to accomplish :

<TabView selectedIndex="1">
  <StackLayout *tabItem="{title: '&#xf030;'}" class="fa">
    <Label text="This is Label in Tab 1  &#xf030;"></Label>
  </StackLayout>
  <StackLayout *tabItem="{title: '&#xf030;'}" class="fa">
    <Label text="This is Label in Tab 1  &#xf030;"></Label>
  </StackLayout>
</TabView>

Here, the font-awesome icon code shows correctly in the Label block but in the tab it doesn't.
It could be really useful to have that working :)

[nawwa]

Hello, i have the same issue here, can someone help ? :(

[matt4446]

The class that describes the font wouldn't find its way to the tab (the text is set via that directive).

Here is said directive:
https://github.com/NativeScript/nativescript-angular/blob/master/nativescript-angular/directives/tab-view.ts#L62

Which sets the title on TabViewItem, which can be found here.

So to add font awesome to the tab view items... I'm not sure. If the tab item were a view then another directive could do a similar job in setting the item className for the element. However, the TabView is the view, and it has items (which have their views ie the stack layout above) so I'm not sure where the font setting would get described, or if it can be described. I need to stop looking at things when sleepy, It's a bit of a blur at the moment. If it can be done for a general tabview + items in plain NativeScript then it should be quite straight forward. Any examples anywhere?

[sivsushruth]

Any updates on this ?

[hdeshev]

Just noticed this issue, and off the top of my head, it looks like the JS object definition in the template attribute needs a JS escape instead of the HTML one. So, instead of:

*tabItem="{title: ''}"

you should try:

*tabItem="{title: '\uf030;'}"

I hope that helps.

[jephtta]

Is there a particular reason why this was closed? As far as i can tell the problem persists.

[sivsushruth]

Please open!

[hdeshev]

At first I thought this was an encoding issue, but now I realize I should have read @matt4446's explanation more carefully. It turns out {N} tab item titles are very hard to customize and I couldn't find an easy way to set a font there -- that's why the font awesome setting isn't being applied in the example above.

Once support for fonts and CSS classes for tab items lands in tns-core-modules, we can extend the directive to apply those settings in Angular apps.
You can track progress in these issues:

• NativeScript/NativeScript#1269
• NativeScript/NativeScript#2551
• NativeScript/NativeScript#2738

[GitYouss]

Hi there,

first attempt to help, so please be gentle with the newbie ^^

For now, I use successfully the plugin nativescript-ngx-fonticon wrote by Nathan Walker

In the TabView I use it as follow:

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000" class="fa" style="font-size: 14"> <StackLayout *tabItem="{title:'fa-bluetooth' | fonticon}"> <TextView text='{{item.title}}' style="font-size: 12"></TextView> </StackLayout> <StackLayout *tabItem="{title:'fa-cog' | fonticon}"> <Label text="Bla bla bla"></Label> </StackLayout> </TabView>

It just does what I expect, display an icon at the expected place.

Hope this helps,

Cheers,

Youss

[dgomezs]

I'm using nativescript-ng2-fonticon and I can use the icons directly in the tabs like this

<TabView #tabview [selectedIndex]="tabindex" class="mdi">
    <StackLayout *tabItem="{title: '&#xE87D; Favorites' }" orientation="vertical">
    </StackLayout>
</TabView>

[Jonatthu]

@dgomezs I'm not able to do it :(

<TabView [(ngModel)]="tabSelectedIndex" tabTextColor="red" class="ion">
    <StackLayout class="ion" *tabItem="{title: ('ion-flash' | fonticon) }">
        <Label class="ion" [text]="'ion-flash' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'ion-home' | fonticon}">
        <Label text="Bla bla bla"></Label>
    </StackLayout>
</TabView>

[dgomezs]

@Jonatthu you can use iconSource attribute on tabItem https://docs.nativescript.org/cookbook/tab-view-ng

[Jonatthu]

@dgomezs What about fonticon from Nathan Walker? Is it possible to get that working here?

[bozhidarc]

I saw this issue is fixed for the plain {N} in #4302, where you can target directly the TabView Item.
In Angular the template structor is completely different so I think there should be a fix for the Angular version, too.
This issue should be reopened or a new one created.

[MuhammadTahir92]

Please solve the font-size issue of tabs view item its to late

[patrickcneuhaus]

Has anyone managed to add a font awesome icon to a TabBar on NativeScript-Vue yet?

I can't believe that a framework that puts itself as a sophisticated mobile development tool hasn't come up with a solution for such a ridiculously simple and obvious feature. The proposed workaround - using images through iconSource - is painfully laborious due to the whole image resizing drama.