3

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.

0

3 Answers 3

11

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)

6
  • 1
    It was the !important that got me as well, great answer, thanks. Jan 30, 2012 at 15:08
  • Am I the only one who can see no logo in the fiddle?
    – gsamaras
    Sep 4, 2015 at 23:02
  • @gsamaras Looks like the logo that used to be displayed is no longer available. I changed the URL to an existing image asset. Also, the !important keyword is not necessary as long as you make your CSS rule more specific than the jQuery Mobile one, which you can do by addling html in front of the class.
    – Jasper
    Sep 4, 2015 at 23:08
  • @Jasper thanks for the quick answer. However, if I use some newer versions of jquery mobile, the icon will be set everywhere: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> Can you see the problem, or do you want me to make a fiddle? If I use the solution of the 2nd answer, I will the icon once (correct), but it will left to the circle that it should be into!
    – gsamaras
    Sep 4, 2015 at 23:13
  • @gsamaras It looks like in the latest stable version of jQuery Mobile (1.4.5) the icons do not have their own <span /> elements but instead are :after pseudo-elements, selected like this: .ui-icon-action:after. That is specifically for the "action" icon. Here is a link to the documentation for how the jQuery Mobile team suggests you use custom icons (which is really similar to the above answer): demos.jquerymobile.com/1.4.5/icons/#CustomIcons
    – Jasper
    Sep 4, 2015 at 23:35
3

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.