CODEWITHSUNDEEP
jquerycssjquery-mobile
Eric Di Bari
Eric Di Bari

Reputation: 3867

jQuery Mobile set 'Retina' icons as default

I'm developing a jquery mobile based website, and setting the css for retina displays. Jquery Mobile includes the 36px x 36px icon sizes, but uses the 18px version by default. I can't find what jQuery Mobile class or data attribute to add to the button to make it use the 36px size.

It looks like the class ui-icon-alt uses the proper background image, but the button doesn't render at all when I change the class from ui-icon to ui-icon-alt. Here is the button in question I'm working on:

<a href="#" data-icon="arrow-l" data-role="button" class="show-back ui-btn-left ui-btn ui-btn-corner-all ui-btn-icon-notext" data-iconpos="notext">
    <span class="ui-btn-inner ">
        <span class="ui-btn-text">Back</span>
        <span class="ui-icon ui-icon-arrow-l"></span>
    </span>
</a>

Upvotes: 1

Views: 2417

Answers (2)

Roshdy
Roshdy

Reputation: 1812

i believe you can give is an ID to the anchor like 

<a id="backBtn" href="#">
<span class="ui-btn-inner ">
    <span class="ui-btn-text">Back</span>
    <span class="ui-icon ui-icon-arrow-l"></span>
</span>

NOTE: You could remove all these span(s) and class(s) if you like and keep it simple And jQuery will take care of the rest of css classes and layout for you. Example:

<a id="backBtn" href="#" data-icon="arrow-l" data-iconpos="notext">Back</a>

Then in your my-custom.css you can edit the icon url() for this specific ID, and so long for other buttons you'd like them to use 36px icon instead of 18px. Example:

#backBtn .ui-icon { 
     width: 36px; 
     height: 36px; 
     background-image: url(images/icons-36-white.png); 
}

Please, let me know if it answers your question, and if so check it as the right answer.

Upvotes: 0

Jack
Jack

Reputation: 11003

You shouldn't need to add anything for your icons to use the Retina version.

According to the jQuery Mobile docs In order to use the retina icons you should use css media queries (if you take a look at the jquery.mobile-1.2.0.css file you'll notive that that is how they accomplish it.

To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second a rule that uses the -webkit-min-device-pixel-ratio: 2 media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules

And the example css

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-myapp-email {
        background-image: url("app-icon-email-highres.png");
        background-size: 18px 18px;
    }
    ...more HD icon rules go here...
}

Upvotes: 1

Related Questions