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