jquery मोबाइल पर कस्टम आइकन का उपयोग कैसे करें?

Question

जब मैं ऐप को एंड्रॉइड पर तैनात करता हूं तो मुझे अपने आइकनों के साथ परेशानी हो रही है। यह काम करता है जब मैं गूगल क्रोम में लहर का उपयोग लेकिन एंड्रॉयड फोन यह काम नहीं कर रहा है पर ले ..

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

सीएसएस:

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

हैडर:

<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

आपका data-icon मूल्य सीएसएस वर्ग .ui-icon-[value]

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

के नाम के बराबर होना चाहिए

JQM ऊपर के लिए निम्नलिखित आइकन का उपयोग करेगा:

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

यह पेज http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html