¿Cómo utilizar iconos personalizados en jQuery móvil?

Tengo problemas con mis iconos que aparecen cuando implemento la aplicación en un Android. Funciona cuando uso Ripple en Google Chrome, pero teniendo que el teléfono Android no funciona.

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

ENCABEZAMIENTO:

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

One Solution collect form web for “¿Cómo utilizar iconos personalizados en jQuery móvil?”

Su valor de data-icon debe ser igual al nombre de la clase CSS .ui-icon-[value]

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

JQM utilizará el icono siguiente para arriba:

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

Consulte la sección de iconos personalizados en esta página http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html

  • Parche blanco de aplicación móvil de JQuery que muestra el cambio de orientación en android
  • ¿Cómo desarrollar una interfaz de usuario que se verá nativa de Android con jQuery-mobile?
  • Aplicación Web: ocultar una div excepto los navegadores android
  • jQuery Los deslizadores de gama Mobile no son lo suficientemente sensibles
  • Es posible mostrar la imagen animada gif en el emulador using phoneGap
  • jQueryMobile se ejecuta en Android / PhoneGap rechaza .load / .ajax
  • Impedir que se active el evento de derivación al deslizar jquerymobile en la vista web de android
  • Escucha tocar y arrastrar el valor y la función en consecuencia
  • Cómo guardar credenciales en Android / jQuery Mobile App
  • Intel XDK: Conexión de la aplicación móvil a una base de datos
  • Soporte de iframe en móviles
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.