Reputation: 372
I've created a tab and figured out how to change the color according to Ionic 4 CSS Docs found here https://beta.ionicframework.com/docs/theming/css-variables
But there is not reference there as to how to change the size, the code on for ionic 3 does not work.
here is what I have
ion-tabs {
margin-top: 80px;
--ion-tabbar-background-color: #FBFBFB;
--ion-tabbar-text-color-active: #87BCDE;
--ion-tabbar-text-color: #424242;
font-size: 40px;
}
Upvotes: 4
Views: 4604
Reputation: 353
With below code you can change the size of tab-label :
ion-tab-button {
ion-label {
font-size: 12px;
}
}
Upvotes: 3
Reputation: 2043
for color in variable.scss:
--ion-tab-bar-background: var(--ion-color-primary);
--ion-tab-bar-color: var(--ion-color-dark);
--ion-tab-bar-color-activated: var(--ion-color-light);
for size i think it's not ready yet to style like that. you can change style of tab-selected in your global.sass
:root{
.tab-selected{
font-size: 32px !important;
ion-icon{
font-size: 32px !important
}
}
}
Upvotes: 0