image icon in segmented bar in nativescript

Question

how to add the image icon in the segmented bar in nativescript-angular. can you please help me with this

 <SegmentedBar #tabs [selectedIndex]="selectSegment">
                <SegmentedBarItem title="test1"></SegmentedBarItem>
                <SegmentedBarItem title="test2"></SegmentedBarItem>
                <SegmentedBarItem title="test3"></SegmentedBarItem>
                <SegmentedBarItem title="test4"></SegmentedBarItem>
        </SegmentedBar>

Jamzy Jamzy · Accepted Answer · 2018-01-16T15:09:02

An easy way to add icons to your Nativescript Segmented Bar items is to use FontAwsome (or any other icon font for that matter).

1: Check out this (http://www.nativescriptsnacks.com/videos/2016/03/07/nativescript-and-font-awesome.html) short five minute video on how to install FontAwsome to your {N} app.

2: Once you install the icon font. Assign style="font-family: 'fontAwesome' " attribute to SegmentedBar xml/"html" tag;

3: Check out http://fontawesome.io/cheatsheet/ to figure out the unicode for the icon you want to use and paste that unicode to the title attribute of the relevant SegmentedBarItem tag. TIP: make sure the code is in the right format. Don't copy the square braces shown on the cheatsheet, just what the string that appears inside them.

THATS IT! Your code should now look something like this:

<SegmentedBar #tabs [selectedIndex]="selectSegment" style="font-family: 'FontAwesome'; color: #eee; background-color: #31394C;">
            <SegmentedBarItem title="&#xf0c0;"></SegmentedBarItem>
            <SegmentedBarItem title="&#xf007;"></SegmentedBarItem>
            <SegmentedBarItem title="&#xf008;"></SegmentedBarItem>
            <SegmentedBarItem title="&#xf0f3;"></SegmentedBarItem>
</SegmentedBar>

This image:

shows the end result of the above code on an android emulator.

image icon in segmented bar in nativescript

3 Answers