¿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

  • Error Phonegap en Android GetPTLAFormat
  • ERROR: Intentando llamar a cordova.exec () antes de 'deviceready'. Postergación
  • No se puede cargar el archivo xml con jquery en el proyecto de phonegap desde la ruta de los recursos
  • Aplicaciones móviles phonegap y control de versiones y actualizaciones
  • Error de entrada con teclado en Galaxy S2 con jQuery Mobile y Phonegap
  • JQuery panel móvil no se cierra completamente sólo en el navegador de Android
  • Marcos multiplataforma web - la diferencia
  • ¿Cómo seleccionar (elegir) varias imágenes utilizando la API de la cámara al mismo tiempo en el teléfono?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.