Come utilizzare le icone personalizzate su jquery mobile?

Question

Ho problemi con le mie icone visualizzate quando distribuisco l'app su Android. Funziona quando uso Ripple in Google Chrome, ma portarlo al telefono Android non funziona ..

<div data-role="footer" data-position="fixed" data-theme="e"> 
    <div data-role="navbar" data-grid="d" data-theme="e" data-type="horizontal" data-position="fixed" id=""> 
    <ul> 
     <li><a href="menu.html"data-role="button" class="icon-list" data-icon="custom">Menu</a></li> 
     <li><a href="aboutus.html" data-role="button" class="icon-info"data-icon="custom" >About Us</a></li> 
     <li><a href="live.html" data-role="button" class="icon-youtube"data-icon="custom" >Watch</a></li> 
     <li><a href="music.html"data-role="button" class="icon-heart" data-icon="custom">Video</a></li> 
     <li><a href="map.html" data-role="button" class="icon-location2"data-icon="custom" >Location</a></li> 
    </ul> 
</div> 

CSS:

.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; 
} 

INTESTAZIONE:

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />  
<link rel="stylesheet" href="css/css/whhg.css"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script type="text/javascript" src="js/cordova.js"></script> 

Answer 1

Il valore data-icon dovrebbe essere uguale al nome della classe CSS .ui-icon-[value]

<li><a href="menu.html"data-role="button" class="icon-list" data-icon="list">Menu</a></li> 

jQm utilizzerà seguente icona sopra:

.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; 
} 

, consultare la sezione icone personalizzate in questa pagina http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html