CODEWITHSUNDEEP
jquery-mobile
Satch3000
Satch3000

Reputation: 49384

JQuery Mobile Custom Icon not showing

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?

Upvotes: 0

Views: 2642

Answers (3)

Pran
Pran

Reputation: 27

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

Upvotes: 0

jedison
jedison

Reputation: 976

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/[email protected]");
        background-size: 36px 36px;
    }
    ...more HD icon rules go here...
}

Upvotes: 4

adamdehaven
adamdehaven

Reputation: 5920

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/[email protected]");
        background-size: 18px 18px;
    }
    ...more HD icon rules go here...
}

Upvotes: 3

Related Questions