Icons showing up as inline in tab bar

On android 4.1, my icons in my tab bar are showing up inline while on the desktop and iOS they show up as block elements. I did some digging in the dev tools and saw that the <i> element is getting a display of inline from somewhere but not from css. Any one have any ideas?

My tabs structure,

<tabs tabs-type="tabs-icon-top" tabs-style="tabs-light">
                <tab title="{{page.id}}" icon-on="{{page.icon}}" icon-off="{{page.icon}}" ng-repeat="page in pet.pages | orderBy:orderProp">

Hey sorry for the late response, did you ever figure this out? It’s working for 4.2+ for me, I don’t have any 4.1 devices to test on at the moment.

When I upgraded to 0.9.23 the issue was resolved. Not sure what the issue was, I went digging the code and couldn’t find out where this was coming from. It may have because of the icons were being applied with the pseudo class :before and could have been rendered differently in that version of android. What ever it was, is has been fixed.

2 Likes

Awesome. Glad to see we’re moving in the right direction!

@mhartington setting the font-family on the :before pseudo was kinda screwy on some devices, and I also cleaned up making when an icon should be a block element or inline. Thanks for letting us know and keep any other issues coming!