I have a problem with the icons in a jquery mobile listview. As you can see in the picture below a question mark is showing after I've updated to the latest version of jquery mobile.

Icons not working correctly .png

Before I updated the question marks were like arrows to the right >.

My HTML:

<div data-role="content" data-theme="c">  
    <div id="status"></div>
    <ul id="linksList" data-role="listview" data-inset="true" data-theme="d" ></ul>
</div>

Javascript function for each row:

function renderEntries(entries) {
    var s = '';
    $.each(entries, function(i, v) {
        s += '<li><a href="#contentPage"  class="contentLink" data-entryid="'+i+'">' +                    v.title + '</a></li>';
    });
    $("#linksList").html(s);
    $("#linksList").listview("refresh");       
}

I've already tried adding data-icon="arrow-r" to the <li items but that didn't work. I've also updated the images map to their latest version.

UPDATE: I've copied this code from the JQM docs:

<ul data-role="listview" data-inset="true" data-theme="b">
    <li data-role="list-divider">Divider</li>
    <li data-icon="home"><a href="#">data-icon="home"</a></li>
    <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
    <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
    <li data-icon="arrow-u"><a href="#">data-icon="arrow-u"</a></li>
    <li data-icon="arrow-d"><a href="#">data-icon="arrow-d"</a></li>
    <li data-icon="check"><a href="#">data-icon="check"</a></li>
</ul>

After testing it i saw that the icons are actually showing BUT theres a question mark icon showing over them. Where does this question mark icon e from? And most importantly how do I get rid of it?

Any help is very appreciated!

Solved:

Seems like it that it was a bug. After updating to the latest JQM build 1.1.1, those question marks disappeared and everything works like it used to.

I have a problem with the icons in a jquery mobile listview. As you can see in the picture below a question mark is showing after I've updated to the latest version of jquery mobile.

Icons not working correctly http://jeflussenburg.nl/img/iconnotshowing.png

Before I updated the question marks were like arrows to the right >.

My HTML:

<div data-role="content" data-theme="c">  
    <div id="status"></div>
    <ul id="linksList" data-role="listview" data-inset="true" data-theme="d" ></ul>
</div>

Javascript function for each row:

function renderEntries(entries) {
    var s = '';
    $.each(entries, function(i, v) {
        s += '<li><a href="#contentPage"  class="contentLink" data-entryid="'+i+'">' +                    v.title + '</a></li>';
    });
    $("#linksList").html(s);
    $("#linksList").listview("refresh");       
}

I've already tried adding data-icon="arrow-r" to the <li items but that didn't work. I've also updated the images map to their latest version.

UPDATE: I've copied this code from the JQM docs:

<ul data-role="listview" data-inset="true" data-theme="b">
    <li data-role="list-divider">Divider</li>
    <li data-icon="home"><a href="#">data-icon="home"</a></li>
    <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
    <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
    <li data-icon="arrow-u"><a href="#">data-icon="arrow-u"</a></li>
    <li data-icon="arrow-d"><a href="#">data-icon="arrow-d"</a></li>
    <li data-icon="check"><a href="#">data-icon="check"</a></li>
</ul>

After testing it i saw that the icons are actually showing BUT theres a question mark icon showing over them. Where does this question mark icon e from? And most importantly how do I get rid of it?

Any help is very appreciated!

Solved:

Seems like it that it was a bug. After updating to the latest JQM build 1.1.1, those question marks disappeared and everything works like it used to.

• javascript
• jquery
• jquery-mobile
• icons

• 1 Just a suggestion: You can post an answer and mark that as the correct answer instead of appending a "solved:" section. – Calavoow Commented Sep 28, 2012 at 14:11

3 Answers 3

A bit old now but this might help someone since I recently had the same issue. Looks like you were missing the images directory from inside www/css There should have been a folder www/css/images with these 5 images in it:

ajax-loader.gif     icons-18-white.png  icons-36-white.png icons-18-black.png   icons-36-black.png

The jquery full package zip (JavaScript, CSS, and images) has them in it.

You should add the data-icon="arrow-r" to the <a> items according to the documentation.

Seems like it that it was a bug. After updating to the latest JQM build 1.1.1, those question marks disappeared and everything works like it used to.