如何将我自己的图标添加到 ons-tab 图标属性答案

【问题标题】：How to add my own icon to ons-tab icon property如何将我自己的图标添加到 ons-tab 图标属性
【发布时间】：2018-04-27 07:02:43
【问题描述】：

我想将我自己的图标添加到 ons-tab 图标属性中，onsen 页面说我需要创建自己的带有背景 img 的 css，我已经尝试过，但是没有用，这就是我所拥有的

     .home-icon{
     font-size: 40px;
     height: 1em;
     background-image: url('assets/icon-start-color.png') 
     center/contain no-repeat;
     }

在我的 html 文件中，这就是我如何称呼这个新的“图标”

<ons-tabbar swipeable position="auto">
  <ons-tab page="inicio.html" label="Inicio" icon="home-icon" active>

  </ons-tab>
</ons-tabbar>

但它不起作用，知道如何添加我的图标吗？

【问题讨论】：

标签： javascript angularjs onsen-ui

【解决方案1】：

假设您已验证您的图标在标签栏之外工作，这里可能发生的是图标的 onsen 自动前缀。

Onsen 会自动为任何不匹配 'md-'、'fa-' 或 'ion-' 的图标加上 'fa-' 前缀，因此您可以使用 ons.disableIconAutoPrefix() 检查这是否是问题所在如此处文档中所述： https://onsen.io/v2/guide/faq.html#how-can-i-use-custom-icon-packs

如果这不是问题，请更新显示图标导入代码的问题。

【讨论】：