Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


¿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

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.