Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why data-icon for jquery mobile did not display?

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.

like image 264
sone Avatar asked Apr 25 '12 02:04

sone


People also ask

What is jQuery Mobile page?

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.

What is data role in jQuery Mobile?

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" .

How to add icon in jQuery?

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 .

Is jQuery Mobile still relevant?

The team announced that the cross-platform jQuery Mobile project under its umbrella is fully deprecated as of October 7, 2021.


2 Answers

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

like image 192
Jasper Avatar answered Oct 21 '22 12:10

Jasper


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... :)

like image 36
Jomia Avatar answered Oct 21 '22 12:10

Jomia