Tabstrip height increase when insert font Icon & narrower buttons

[Steven]

When ever I put a custom font icon in the tab strip it raises the height of the tab strip. The extra height (blank space above teh icon) is equivalent to the space reserved for the icon.  When I look at the code in dreamweaver I can see a grey square for where the Icons are meant to go and when the custom icon is inserted this grey box is place above the custom icon and the whole tab space is raised.  I tried all types of css  but is keeps on reserving this space for the kendo icon and will not give up the space when a custom font icon is inserted.


<footer data-role="footer">
    <div data-role="tabstrip" style="background-color:#F96;font-size:small">
      <a onclick="noImg();" data-icon="favourites">None</a>
      <a onclick="medImg();" data-icon="compose" >Med</a>
      <a onclick="lgImg();" data-icon="globe">Large</a>
     <a href="views/insect.html" class="tabIcon"><i class="icon-kub-mobile" style="font-size:xx-large"></i><div>All hhh</div></a>
     </div>
  </footer>


Also when I have many buttons in the tabstrip each button has too much padding/margins and I would like them to be able to become even more narrower than default. How do I do this?

[Iliana Dyankova]

Hi Steven,

Please take a look at this help topic - it described how to create custom font icon in Kendo UI Mobile. Also in order to customize the appearance of any Kendo UI widget you should override the default styles using custom CSS rules.

Regards,
Iliana Nikolova
Telerik