CODEWITHSUNDEEP
font-awesomeangular2-nativescriptnativescript-telerik-ui
Anurag
Anurag

Reputation: 84

Using font awesome icons in a NativeScript SegmentedBar Title

For our NativeScript Angular2 app we need bottom aligned tabs. We are attempting to implement this through SegmentedBar (since I understand tabviews cannot be bottom aligned in NativeScript-Angular2 apps). How can I implement font awesome icons in the segmented bar titles? I tried saving this the unicode in the items array and then assigning a font awesome class in the html, but this did not work. Any other alternative?

My code is below - segmentedbar.ts:

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { SegmentedBarItem } from "ui/segmented-bar";

@Component({
moduleId: module.id,
selector: "maintab",
templateUrl: "./maintab.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MainTabComponent {
public myItems: Array;
public prop = "Item " + 0;

constructor() {
    this.myItems = [];
    for (let i = 1; i < 5; i++) {
        let tmpSegmentedBar: SegmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
        tmpSegmentedBar.title = "Tab " + i;

        this.myItems.push(tmpSegmentedBar);
    }
}

This is my segmentedbar.html

<StackLayout>
    <StackLayout>
        <!-- >> segmentedbar-basic-html -->
        <Label [text]="prop" textWrap="true" vertical-align="center" class="h2 p-15 text-center"></Label>
        <SegmentedBar class="m-5" #sb [items]="myItems" selectedIndex="0" (selectedIndexChange)="prop='Item '+ sb.selectedIndex"></SegmentedBar><!-- << segmentedbar-basic-html -->
    </StackLayout>
</StackLayout>

Upvotes: 0

Views: 866

Answers (1)

Dlucidone
Dlucidone

Reputation: 1101

You can use font awesome icons easily -

1- Create a folder naming fonts and keep fontawesome-webfront.ttf file in it. You can download it from the fontawesome website.

2- create a css class like this with the same name as you saved in fonts folder

.font-awesome {
 font-family: "fontawesome-webfont";
 font-size: 14;
 font-weight: normal;
 text-align: center;
 font-style: normal;
}

3-Now use it like this wherever you want juss mention class as font-awesome

<Button class="font-awesome" id="add"  [text]='"&#xf156;"'(tap)="anyTapEvent()">

Upvotes: 1

Related Questions