iOS: Font icons in BottomNav aren't very crisp #7913
Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: 6.1.2
- Cross-platform modules: 6.1.1
- iOS Runtime: 6.1.1
- Plugin(s): not related
Describe the bug
Font icons in bottomnav tabstrip aren't very crisp for what a font icon should produce.
To Reproduce
material design icon fonts in tabstrip for tab icons
Expected behavior
Crisp icon fonts
Sample project
https://github.com/Max-Mobility/permobil-client/issues/416#issue-503605852
Additional context
Android image for comparison:
<BottomNavigation (loaded)="onRootBottomNavLoaded($event)" (selectedIndexChanged)="tabViewIndexChange($event)" selectedIndex="1">
<TabStrip>
// Journey
<TabStripItem class="tabstripitem">
<Label [text]="'journey-tab.title' | translate"></Label>
<Image src="font://"></Image>
</TabStripItem>
// Home
<TabStripItem class="tabstripitem">
<Label [text]="'home-tab.title' | translate"></Label>
<Image src="font://"></Image>
</TabStripItem>
// Profile
<TabStripItem class="tabstripitem">
<Label [text]="'profile-tab.title' | translate"></Label>
<Image src="font://"></Image>
</TabStripItem>
</TabStrip>
// Journey
<TabContentItem>
<StackLayout>
<journey-tab></journey-tab>
</StackLayout>
</TabContentItem>
// Home
<TabContentItem>
<StackLayout>
<home-tab></home-tab>
</StackLayout>
</TabContentItem>
// Profile
<TabContentItem>
<StackLayout>
<profile-tab></profile-tab>
</StackLayout>
</TabContentItem>
</BottomNavigation>variables:
/**** Fonts *****/
$material-icon: 'MaterialIcons-Regular', MaterialIcons-Regular, 'Material Icons',
Material Icons;
$os: 'OpenSans-Regular', 'OpenSans', 'Open Sans', Open Sans;
$os-Light: 'OpenSans-Light', 'OpenSans Light';
$os-SemiBold: 'OpenSans-SemiBold', 'Open Sans SemiBold';
$os-SemiBold-Italic: 'OpenSans-SemiBoldItalic', 'Open Sans SemiBold Italic';
/**************/// Bottom Navigation
TabStrip {
background-color: $white;
}
TabStripItem > label {
font-family: $os;
}
TabStripItem > image {
font-family: $material-icon;
}
TabStripItem.tabstripitem {
color: $inactive-grey;
> label {
font-size: 12;
}
> image {
font-size: 10;
}
}
TabStripItem.tabstripitem-active {
color: $permobil-primary;
> label {
font-size: 14;
}
> image {
font-size: 10;
}
}