title: Custom image as icon in header bar
body: <p>I'm trying to do a very simple task since 2 days while learning Jquery Mobile framework !!!</p>
  
  <p>How to add a custom icon and a centered title inside the header bar of a JQuery page .. ?
  There's a lot of post and all refers to "button" icons, that's not my goal.</p>
  
  <p>I just want to set a custom IMAGE on the left side of my header ... as 99% of any web application I think. </p>
  
  <p>Why is it so hard to put in place such basic things ?</p>
  
  <p>I tried this following official doc and posts:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  &lt;title&gt;JQM&lt;/title&gt;    
  &lt;meta name="viewport" content="width=device-width, user-scalable=no , initial-scale=1"/&gt;    
  &lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/&gt;    
  &lt;link rel="icon" type="image/icon" href="/images/favicon.ico"/&gt;    
  &lt;link href="/css/steel/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css"/&gt;                
  &lt;link href="/css/site-mob.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="/js/jquery-1.10.2.min.js" type="text/javascript"&gt; &lt;/script&gt;
  &lt;script src="/js/jquery.mobile-1.4.2.min.js" type="text/javascript"&gt; &lt;/script&gt;&lt;/head&gt;
  
  &lt;body&gt;&lt;section data-role="page" id="main-page"&gt;
  &lt;header data-role="header" id="top" data-icon="myimage"&gt;&lt;h1&gt;Page Title&lt;/h1&gt;&lt;/header&gt;
  &lt;div id="content" data-role="content"/&gt;
  &lt;div id="footer" data-role="footer" data-theme="a"/&gt;&lt;/section&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong> (/css/site-mob.css)</p>
  
  <pre><code>.ui-icon-myimage {
    background: url(/images/myimage.png) 50% 50% no-repeat;
    background-size: 38px 38px;
  }
  </code></pre>
  
  <p>but it doesn't work. No image displayed. .... I'm certainly missing something ..</p>
  
  <p>Thanks for your help</p>