why data-icon for jquery mobile did not display?

Question

i used data-icon in my code with the button, but the problem is, the icon did not display. it only display a circle..

this is my html code

<a href="index.html" data-role="button" data-icon="delete">Remove</a> 
<a href="index.html" data-role="button" data-icon="plus">Add</a> 
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a> 
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a> 

i'm not why this problem occur, for all button which use icon or automatically have icon like

data-add-back-btn="true"

the back icon also doesn't display, only the button with the text back

can anyone help me? thanks.

Answer 1

Links are not turned into buttons unless you add the data-role="button" attribute.

Form <input type="button" /> and <input type="submit" /> are automatically turned into "Button Widgets", as are <button></button> tags.

Documentation: http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-types.html

Answer 2

You should add 'images' folder (which is coming with jquery mobile folder) within your project. You should add this 'images' folder to the same folder where jquery.mobile.js and jquery.mobile.css files are kept.

I also faced the same problem, after doing so many trial and errors i found this solution.. Now the icons are displaying... :)