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.
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
Pages & DialogsA page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header" , class="ui-content" , and data-role="footer" .
In widgets where you set the icon with a data-icon attribute you use the name of the icon as value. For example: data-icon="arrow-r" . To add an icon to link buttons and button elements, use the name prefixed with ui-icon- as class. For example: ui-icon-arrow-r .
The team announced that the cross-platform jQuery Mobile project under its umbrella is fully deprecated as of October 7, 2021.
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
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... :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With