Using font awesome icons in segmenetd bar titles


#1

For our app we need bottom aligned tabs. We are attempting to implement this through SgementedBar (since I understand tabviews cannot be bottom aligned). 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:

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

#2

Hello there.

Have you checked this? https://github.com/NathanWalker/nativescript-fonticon

It easily enables the use of icons as a class of an element.


#3

Thanks to @theotheo on slack this works :

Import TNSFontIconPipe into your component.

Add it as an provider and to your constructor.

then you can do the following:
tmpSegmentedBar.title = fontPipe.transform("fa-info", []);


#4

Unicode should be working with it but there are two implementations with font-awesome.

You can etiher use (this is an example) \uf2c1 or &#0f2c1. The first one is working when provided on a TS file, and the second one works as the text value if provided on the template. So you can finely use font awesome class, and provide the items from the component if you use the first syntax.

constructor() {
this.myItems = [];
for (let i = 1; i < 5; i++) {
    let tmpSegmentedBar: SegmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
    tmpSegmentedBar.title = "\uf2c1"; //Works
    tmpSegmentedBar.title = "&#0f2c1"; //Does not work

    this.myItems.push(tmpSegmentedBar);
}

}


#5

@Eric
this works perfect on iOS but can’t seem to get this to work on Android.

fonts folder :
font-awesome.css
FontAwesome.ttf

Module

            'fa': 'fonts/font-awesome.css'
        }),```

xml
```<SegmentedBar class="fa" style="color: white;" backgroundcolor="#00FFFFFF" [selectedBackgroundColor]="selectedBackground" #sb
        [items]="items" (selectedIndexChange)="onChange(sb.selectedIndex)">```

css
```.fa {
  font-family: FontAwesome;
  font-size:9;
}```

component.ts
```this.items = [];
        for (let i = 1; i < 4; i++) {
            let tmpSegmentedBar: SegmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
            switch (i) {
                case 1:
                    if(isIOS){
                    tmpSegmentedBar.title = fontPipe.transform("fa-home", []);
                    
                    }else{
                     tmpSegmentedBar.title = "\uf003"; //fontPipe.transform("fa-home", []);    
                    }                                        
                    break;```

#6

nvm seems like genymotion had a glitch. above works perfect.