jQuery mobile: data-icon causing text value to display above icon

Question

I've never posted a question on here since I can usually find the answer, but this one has escaped me.

Have jQuery mobile version 1.3.2 along with the associated css file.

And since pictures are worth a million words, just take a look at what is happening.

http://s11.postimg.org/hojpomu4z/Image_8_20_13_at_3_52_PM.jpg

See the problem? Obviously the text from the data-icon attribute is displaying above the button.

My Personal Web Inspector nor Firebug are able to recognize that anything is there.

I've tried it on chrome, firefox, safari, and ie 9/10. Both mac and pc. Nothing.

I've tried the past 5 versions of jQuery mobile. Also have tried both jQuery 1.9 and 1.10

Using the hosted buttons images and my own button images.

I've stripped down the page to the point where its only the jQuery definitions with a button and it still does this. Even tried the jQuery files hosted on CDN.

There's really no other code to show except what is in the screenshot, as that's all there is going on. (ignore the class of new_round), it's blank.

I'm just hoping someone else has run into this problem and may be able to offer a solution.

(This isn't my first time using jQuery mobile, but this is the first time I've seen this happen.)

Answer 1

I run into the exact problem today and luckily found the solution.

I am using JQuery Mobile in a wordpress theme called Customizr. When I add a link like this:

<a data-icon="gear" data-role="button" href="#">Hey</a>

I will get a button with "gear" right above "Hey" as described by the PO.

That is because of this CSS rule hidden deep within the theme:

[data-icon]:before {
    content: attr(data-icon);
}

To solve this problem, simply override this rule with:

[data-icon]:before {
    content: "";
}

You may need to look for this rule in your CSS. Hope it helps.

Answer 2

If you only need icon without text you need to add this as attribute inside your link:

data-iconpos="notext"

For example:

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>