Cách sử dụng các biểu tượng tùy chỉnh trên điện thoại di động jquery?

Question

Tôi gặp sự cố với các biểu tượng hiển thị khi tôi triển khai ứng dụng cho Android. Nó hoạt động khi tôi sử dụng Ripple trong Google Chrome nhưng dùng nó để điện thoại android nó không làm việc ..

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

HEADER:

<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

giá trị data-icon của bạn phải bằng tên của lớp CSS .ui-icon-[value]

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

JQM sẽ sử dụng biểu tượng sau đây cho ở trên:

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

Tham khảo phần Icons Tuỳ chỉnh trên trang này http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html