Question

I am trying to add a single custom icon to jqm and I’m doing the following:

<style>
.ui-icon-myicon {
    background-image: url('images/myicon.png') !important;
}
</style>

Then in the footer…

<li>
<a href="#" data-icon="myicon" data-iconpos="top" class="ui-btn-active ui-state-persist btn_inner">News</a>
</li>

My problem is that nothing is showing up.

I’m I forgetting something here?

Answer 1

Remove your class tag and use the identifiers built into JQM.

<a href="news.html" data-role="button" data-iconpos="top" data-icon="myicon">News</a>

If you’re wanting the icon to appear on a high pixel density device (i.e. an Apple Retina display) you need to include a second image twice the size. So in your CSS:

.ui-icon-myicon {
    background-image: url("images/myicon.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-myicon {
            /*this image should be sized at 36 x 36 */
        background-image: url("images/[e-mail]");
        background-size: 18px 18px;
    }
    ...more HD icon rules go here...
}