Jak używać niestandardowych ikon na jquery mobile?

Question

Mam problem z ikonami pojawiającymi się po wdrożeniu aplikacji na Androida. To działa, gdy używam Falowanie w Google Chrome, ale biorąc go do telefonu z systemem Android nie działa ..

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

nagłówka:

<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

swoją wartość data-icon powinien być równy nazwie klasy CSS .ui-icon-[value]

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

JQM użyje następującą ikonę powyżej:

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

Patrz sekcja niestandardowe ikony na tej stronie http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html