Currently, the icon position for every button in a navbar must be in the same position. This seems clunky and it is unnecessary to have this restriction. The current CSS can render a mixture of left, right and not set, or top and bottom, perfectly well without any changes. The attached images show the result of manually switching and removing ui-btn-icon-* classes in the DOM.
The enhancement functions could be changed to allow such overrides per navbar item. A little extra CSS you could even have a mix of horizontal and vertical positions, though I can't imagine that looking very good.
Even if this improvement is not implemented, it would be good if the classes ui-btn-icon-right or ui-btn-icon-left were not added to items that have no icon. The classes make the text-only buttons look misaligned because of the extra padding.
Thanks for your post. I agree that we can improve the way icon position is handled in the navbar widget.
For the 1.4 release we are planning on re-factoring the code and will look into this issue as well.
We should also make it possible to have navbar buttons with icons only. http://jsbin.com/exigay/5/edit
Are there any temporary solutions to icon positioning within the navbar widget until jquery version 1.4 is released? I have a simple two button navbar and need the icons to fall to the left on both buttons.
Just attach a function to pageinit and change the css classes manually.
Closing as duplicate of #6337.