title: How to use custom icons on jquery mobile?
body: <p>I am having trouble with my icons showing up when i deploy the app to an Android. It works when i use Ripple in Google Chrome but taking it to the android phone it is not working..</p>
  
  <pre><code>&lt;div data-role="footer" data-position="fixed" data-theme="e"&gt;
    &lt;div data-role="navbar" data-grid="d" data-theme="e" data-type="horizontal" data-position="fixed" id=""&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="menu.html"data-role="button" class="icon-list" data-icon="custom"&gt;Menu&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="aboutus.html"  data-role="button" class="icon-info"data-icon="custom" &gt;About Us&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a  href="live.html" data-role="button" class="icon-youtube"data-icon="custom" &gt;Watch&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a  href="music.html"data-role="button" class="icon-heart" data-icon="custom"&gt;Video&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a  href="map.html"   data-role="button" class="icon-location2"data-icon="custom" &gt;Location&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-icon-earth {
    background: url(image/png/earth.png) 50% 50% no-repeat;
    background-size: 32px 32px;
    border-radius:0px!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    -ms-border-radius:0px!important;
    -o-border-radius:0px!important;
  }
  .ui-icon-location2 {
    background: url(image/png/location2.png) 50% 50% no-repeat;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: -2px!important;
    margin-left:-15px!important;
  }
  .ui-icon-tv {
    background: url(image/png/tv.png) 50% 50% no-repeat;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: -2px !important;
    margin-left:-15px!important;
  }
  .ui-icon-list {
    background: url(image/png/lines.png) 50% 50% no-repeat;
    background-size: 38px 38px;
    width: 30px;
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: -2px !important;
    margin-left:-15px!important;
  }
  .ui-icon-home {
    background: url(image/png/home.png) 50% 50% no-repeat;
    background-size: 32px 32px;
  }
  .ui-icon-youtube {
    background: url(image/png/earth.png) 50% 50% no-repeat;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: -2px!important;
    margin-left:-15px!important;
  }
  .ui-icon-calendar {
    background: url(image/png/calendar.png) 50% 50% no-repeat;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: -2px !important;
    margin-left:-15px!important;
  }
  .ui-icon-heart {
    background: url(image/png/youtube.png) 50% 50% no-repeat;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: -2px!important;
    margin-left:-15px!important;
  }
  </code></pre>
  
  <p>HEADER:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;    
  &lt;link rel="stylesheet" href="css/css/whhg.css"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/cordova.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/cordova.js"&gt;&lt;/script&gt;
  </code></pre>