JQuery Mobile Custom Icon not showing - jquery-mobile

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>
News
</li>
My problem is that nothing is showing up.
I'm I forgetting something here?

Answer 1

WARNING: If you're using jQuery 1.4+, then you need to define these somewhat differently (notice :after below)
.ui-icon-myicon:after {
background-image: url("images/myicon.png");
background-size: 18px 18px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myicon:after {
background-image: url("images/myicon#2x.png");
background-size: 36px 36px;
}
...more HD icon rules go here...
}

Answer 2

Remove your class tag and use the identifiers built into JQM.
News
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/myicon#2x.png");
background-size: 18px 18px;
}
...more HD icon rules go here...
}

Answer 3

I have faced the same issue, I have checked the inspect element and found that URL of my background custom icon path was wrong.
I have my custom icon in images folder so in CSS I have given
.ui-icon-myicon:after{
background-image:url("images/facebook.png");
/* Make your icon fit */
background-size:18px 18px;
}
The URL pointed previously to:Myproject/css/images/facebbok.png
Then I changed my CSS as:
.ui-icon-myicon:after{
background-image:url("../images/facebook.png");
/* Make your icon fit */
background-size:18px 18px;
}
After doing that I am able to see image