Onsen-ui ons-tabbar icon size

1
votes

I'm using ons-tabbar and it seems to force the icon size. Any ideas how to make the icon size different?

<ons-tabbar position="top">
  <ons-tabbar-item icon="fa-home"  page="home.html" active="true"></ons-tabbar-item>
  <ons-tabbar-item icon="fa-th-large" page="list.html"></ons-tabbar-item>
  <ons-tabbar-item icon="fa-search" page="search.html"></ons-tabbar-item>
  <ons-tabbar-item icon="fa-bell" page="shared.html"></ons-tabbar-item>
  <ons-tabbar-item icon="fa-user" page="user.html"></ons-tabbar-item>
</ons-tabbar>

Making the content of the item an icon works but wont show any active states since its the wrong element now.

<ons-tabbar-item   page="home.html" active="true"><ons-icon icon="fa-home" size="20px"></ons-icon></ons-tabbar-item>
1
onsen-ui

1 Answers

3
votes

You could use the following CSS to change the font-size of the icons:

ons-tabbar-item ons-icon {
  font-size: 20px !important; 
}

It will override the standard size and change the icon size to 20px.

Please look at this example: http://codepen.io/argelius/pen/PwPzzW