title: Custom Icon in JQuery Mobile Header
body: <p>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: 
  <a href="http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html" rel="nofollow">http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html</a>, my icon appears all weird. I can't seem to get a simply "play" button in my header bar. Here is my code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    .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; }  
  &lt;/style&gt;
  
  &lt;div id="myPage" data-role="page" data-dom-cache="false"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;My Title&lt;/h1&gt;
          &lt;a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus"&gt;Continue&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;
      &lt;!-- page content goes here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can someone please tell me how to fix this?</p>