button with icon and no text #3284

pehrlich opened this Issue Dec 16, 2011 · 3 comments


None yet

3 participants


<a data-role="button" data-icon="forward"></a>

Generates this markup:

<a data-role="button" data-icon="forward" class="ui-btn ui-btn-icon-left ui-corner-left ui-btn-up-a" data-theme="a">
<span class="ui-btn-inner ui-corner-left" aria-hidden="true">
    <span class="ui-btn-text"></span>
    <span class="ui-icon ui-icon-forward ui-icon-shadow"></span>

This appears as a rectangular button -- extra padding on the right with the empty span. The span can't simply be removed, because the button looses its height.

Here's my hack for the time being:

.ui-btn.notext .ui-btn-inner{
  padding-right: 0;
  margin-right: -5px; /* not a perfect soltiuon, leaves border along top */

d'oh. Just found that, too.

Wouldn't be bad if it did it intelligently I suppose..

UPDATE: actually, this causes the vertical alignment to go weird next to a regular button

jQuery Foundation member

@pehrlich Is this what you mean with "vertical alignment to go weird next to a regular button"... http://jsbin.com/ikibog/2/

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jun 8, 2012
@jaspermdegroot jaspermdegroot Fixes #3284 - Added vertical-align middle for inline buttons to creat…
…e consistency between browsers, since the default vertical alignment differs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment