[TabView] Icons/Text shows in the top and reaches the content

#1

Hi guys, I am working on a page with contains a TabView and using font-awesome icons instead of text. The icons are showing in the top of the TabView and part of them are shown inside the current content. I have been searching and I couldn’t find a way to center them vertically. I have shared my code and a screenshot.

Thanks!

HTML:

<TabView [(ngModel)]="_dashboardSelectedIndex" class="tab-view font-18 fa">
    <StackLayout class="no-fa" *tabItem="{title: '\uf085'}">
    </StackLayout>
    <StackLayout class="no-fa" *tabItem="{title: '\uf201'}">
    </StackLayout>
    <StackLayout class="no-fa" *tabItem="{title: '\uf025'}">
    </StackLayout>
    <StackLayout class="no-fa" *tabItem="{title: '\uf200'}">
    </StackLayout>
</TabView>

tabview-nativescript-ng
tabview-nativescript-ng.png1685×183 8.71 KB

Any help will be appreciated…