title: Custom icons with JQuery Mobie using PhoneGap not working
body: <p>I'm using PhoneGap and JQuery Mobile.  I'm trying to use custom button icons.  I have seen many of examples as to how this works but I cannot manage to get it to work within my phone gap app.</p>
  
  <p>In my header I have the following style:</p>
  
  <pre><code>                    .ui-icon-customic {
                          background-image: url(/nasa.png);
                          background-repeat: no-repeat;
                      }
                      .ui-icon-customic {
                          background-position: 0 50%;
                      }
  </code></pre>
  
  <p>In the body I have following button:</p>
  
  <pre><code>  &lt;a href="#" data-role="button" data-icon="customic" data-iconpos="right"&gt;Custom Icon&lt;/a&gt;
  </code></pre>
  
  <p>A little more background is that style entry is at the last entry in the header after all other JQuery references. </p>
  
  <p>These are the version of the other entries:
  phonegap-1.0.0.js
  <a href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="nofollow">http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css</a>
  docs/_assets/css/jqm-docs.css
  <a href="http://code.jquery.com/jquery-1.6.4.min.js" rel="nofollow">http://code.jquery.com/jquery-1.6.4.min.js</a>
  experiments/themeswitcher/jquery.mobile.themeswitcher.js
  docs/_assets/js/jqm-docs.js
  <a href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js" rel="nofollow">http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js</a></p>