Onsen-ui ons-tabbar图标大小

Question

我使用ons-tabbar，它似乎强制图标大小。任何想法如何使图标大小不同？

<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>

使项目的内容成为一个图标但不会显示任何活动状态，因为它现在是错误的元素。

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

Answer 1

您可以使用以下CSS更改图标的字体大小：

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

它将覆盖标准尺寸并将图标大小更改为20px。

请看这个例子： http://codepen.io/argelius/pen/PwPzzW