CODEWITHSUNDEEP
javascriptangularjsonsen-ui
Jaime Cuellar
Jaime Cuellar

Reputation: 7

How to add my own icon to ons-tab icon property

I want to add my own icon to the ons-tab icon property, the onsen page says that i need to create my own css with background img, i have tried that, but didnt work, here is what i have

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

and in my html file this is how i call this new "icon

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

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

but its not working, any idea in how to add my icon?

Upvotes: 0

Views: 704

Answers (1)

ArraisLF
ArraisLF

Reputation: 66

assuming you have verified your icon works outside of tabbar, what could be happening here is the onsen autoprefix for icons.

Onsen auto-prefixes any icon that doesn't match 'md-', 'fa-' or 'ion-' with 'fa-', so you could check if this is the problem by using ons.disableIconAutoPrefix() as described in the documentation here: https://onsen.io/v2/guide/faq.html#how-can-i-use-custom-icon-packs

If this isn't the problem, please update the question showing the import code for the icon.

Upvotes: 0

Related Questions