Custom Icon in JQuery Mobile Header
I am trying to use a custom icon in the header of my jQuery Mobile app. 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 in the header as described here: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html my icon looks all strange. I can't seem to just hit the play button in my title 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?
source to share
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 adds "ui-icon" to the value you provide to the data-icon attribute to build the css class name. Since your data-icon attribute is set to "custom". The associated css class should be named ".ui-icon-custom".
Link: http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html
source to share
JQuery mobile has a way to create custom button icons. Here is a working example http://jsfiddle.net/codaniel/88kQu/1/
Below is a snippet from http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html
To use custom icons, provide a data icon value that has a unique name, such as myapp-email, and the button plugin generates a class with the ui-icon- data icon icon prefix and applies it to the button: ui-icon-myapp-mail.
Then you can write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the origin of the icon background. To maintain visual consistency with the rest of the icons, create an 18x18 px white icon saved as PNG-8 with alpha transparency.
In this example, we're just pointing to a standalone icon image, but you can just as easily use a sprite icon and specify positioning instead, just like the icon sprite we're using in the framework.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
source to share