Skip to content


Subversion checkout URL

You can clone with
Download ZIP


button with icon and no text #3284

pehrlich opened this Issue · 3 comments

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


@pehrlich Is this what you mean with "vertical alignment to go weird next to a regular button"...

@jaspermdegroot jaspermdegroot closed this issue from a commit
@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
Something went wrong with that request. Please try again.