Using custom icons in jquery mobile list

问题

I have found documentation on using custom icons for jQuery mobile buttons and how to customize lists using existing icons but I am unable to find how to add custom icons to list views (i.e. PNGs I have created my self).

I have tried setting the data-url:

<li data-icon="action-arrow">...</li>

to the name of the png file as explained in the jQuery mobile buttons but this doesn't work.

回答1:

You need to add a CSS rule for your new icon:

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
}

Upadate:

You can also just make your CSS rule more specific than the jQuery Mobile rule like so:

html .ui-icon-myapp-email {
    ...
}

That's about it, you should then be able to use this icon by referencing it like this:

<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>

Note that the icon does not display if there is not a link in the li element.

Here is a demo: http://jsfiddle.net/KYaQT/106/ (Updated Link)

回答2:

In addition to the background-image you may want to modify the background-color and the size of the icon container. By default the icon is 18x18 pixels. If your icon is larger than that you will have to change the position and margins as well.

/* email icon */
 .ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
    background-color: none;
    border: none;
    box-shadow: none;
    }

回答3:

I've solved this way, since I wanted to use svg files for my web app:

put a class to the list you want to modify, "newlist" (in the case you want to modify certain lists, not all of the site)
make disappear the icon: .newlist span.ui-icon{display:none}
create the new icon class: "newicon", and style{position:relative}
you can give the image as background or load it inside the div, i loaded it inside, since i wanted to put a different icon for everyone, style{ position:absolute;width:24px;heigh;24px;right:10px;top:50%;margin-top:-12px;display:block}
put the div with the image inside after the <a> element inside the <li> element

i used 24x24 pixels images

来源：https://stackoverflow.com/questions/9041311/using-custom-icons-in-jquery-mobile-list

标签

javascript

jquery

jquery-mobile