CODEWITHSUNDEEP
jquery-mobileicons
Chinchan Zu
Chinchan Zu

Reputation: 918

JQueryMobile: Custom icons

I created a custom icon, when I assign it to a hard-coded list the custom icon shows. but when I place it to a programmatically added list in a table it doesn't show but instead displays the "plus" icon.

ironically when I try the "delete" built-in icon it properly shows but my custom made icon wont.

these are the scenario:

this is my custom button

 $(".ui-icon-customicon").css({'background-image':'url("http://website/mycustomeicon.jpg")','backgroundRepeat':'no-repeat', 'height':'18px', 'width':'18px', 'background-position':'center', 'background-color':'white'});

when I use the above button to a hard-coded list in a Table it properly shows. But when I use it like this...

listItem = document.createElement('li');
listItem.setAttribute("data-icon","customicon");

my icon doesnt show. and instead it displays the "plus" icon. but when I try this....

listItem = document.createElement('li');
listItem.setAttribute("data-icon","delete");

the button changes to the delete (builtin-icon) icon. Anyone can help me whats the problem? please???

Upvotes: 2

Views: 2096

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85378

Update

Updating lists
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example,

$('ul').listview('refresh');

Custom Icons

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

Docs:

Upvotes: 3

Related Questions