CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
rogermushroom
rogermushroom

Reputation: 5586

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.

Upvotes: 3

Views: 11272

Answers (3)

Jasper
Jasper

Reputation: 75993

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)

Upvotes: 11

appcropolis
appcropolis

Reputation: 276

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;
    }

Upvotes: 3

Ricardo Escobar Montecinos
Ricardo Escobar Montecinos

Reputation: 23

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

Upvotes: 2

Related Questions