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 ( When I try to use it in the right button in the header as described here: 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; }  

<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 data-role="content">
    <!-- page content goes here -->


Can someone please tell me how to fix this?


source to share

2 answers

Change the CSS name for the custom icon as follows

<style type="text/css">
  ... clipped... 
    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".




JQuery mobile has a way to create custom button icons. Here is a working example

Below is a snippet from

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");




All Articles