CODEWITHSUNDEEP
jqueryjquery-mobile
JQuery Mobile
JQuery Mobile

Reputation: 6291

Custom Icon in JQuery Mobile Header

I am trying to use a custom icon in the header of my JQuery Mobile application. The specific icon I'm trying to use is just the "play" icon from Glyphish (http://glyphish.com/). When I try to use it in the right button within the header as outlined here: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html, my icon appears all weird. I can't seem to get a simply "play" button in my header bar. Here is my code:

<style type="text/css">
  .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
  #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; }  
</style>

<div id="myPage" data-role="page" data-dom-cache="false">
    <div data-role="header">
        <h1>My Title</h1>
        <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a>
    </div>

    <div data-role="content">
    <!-- page content goes here -->
    </div>
</div>

Can someone please tell me how to fix this?

Upvotes: 3

Views: 12892

Answers (2)

sumitkm
sumitkm

Reputation: 743

Change the CSS name for the custom icon as follows

<style type="text/css">
  ... clipped... 
.ui-icon-custom
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px;  
}

jQuery mobile prepends 'ui-icon' to the value you provide for the data-icon attribute to construct the css class name. Since your data-icon attribute has value 'custom'. The related css class should be called '.ui-icon-custom'.

Ref: http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Upvotes: 4

codaniel
codaniel

Reputation: 5253

Jquery mobile has a way of doing custom button icons. Here is a working example http://jsfiddle.net/codaniel/88kQu/1/

The following is a tidbit from http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button: ui-icon-myapp-email.

You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

Upvotes: 1

Related Questions