jQuery Iconos
Para añadir un icono a su <a> y <button> elementos en jQuery Mobile, utilice la clase icono y coloque el icono como se muestra a continuación (la única excepción es botones en navbars, que se muestran más abajo):
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</a>
Try it
<button class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</button>
Try it
Para añadir un icono a sus <input> botones, utilice el data-icon de atributos:
<input type="button" value="Refresh page" data-icon="refresh" >
Try it
Para añadir un icono a los botones navbar, utilice el atributo de icono de datos:
<a href="#anylink" data-icon="refresh" >Refresh Page</a>
Try it
Para añadir un icono a la lista de botones, utilice el atributo de datos sobre el icono <li> :
<li data-icon="refresh" ><a href="#">Click me</a></li>
Try it
A continuación ofrecemos una lista de todos los iconos disponibles que jQuery Mobile ofrece:
| Valor | Descripción | Icono | Ejemplo |
|---|---|---|---|
| action | Acción (flecha apuntando hacia la derecha de una caja) | Intentalo | |
| alert | alert | Intentalo | |
| audio | Audio / Sonido / Altavoces | Intentalo | |
| arrow-d-l | La flecha que apunta hacia abajo a la izquierda | Intentalo | |
| arrow-d-r | La flecha que apunta hacia abajo a la derecha | Intentalo | |
| arrow-u-l | Flecha que señala hacia arriba a la izquierda | Intentalo | |
| arrow-u-r | Flecha que señala hacia arriba a la derecha | Intentalo | |
| arrow-l | Flecha que señala a la izquierda | Intentalo | |
| arrow-r | La flecha apunta hacia la derecha | Intentalo | |
| arrow-u | Flecha que apunta hacia arriba | Intentalo | |
| arrow-d | Flecha apuntando hacia abajo | Intentalo | |
| back | Volver (flecha curva apuntando hacia la izquierda hacia arriba) | Intentalo | |
| bars | Bares (tres barras horizontales más de uno al otro) | Intentalo | |
| bullets | Balas (tres balas horizontales más de uno al otro) | Intentalo | |
| calendar | calendar | Intentalo | |
| camera | camera | Intentalo | |
| carat-d | Quilates apuntando hacia abajo | Intentalo | |
| carat-l | Quilates señala a la izquierda | Intentalo | |
| carat-r | Quilates apunta hacia la derecha | Intentalo | |
| carat-u | Quilates apuntando hacia arriba | Intentalo | |
| check | Marca de verificación | Intentalo | |
| clock | clock | Intentalo | |
| cloud | cloud | Intentalo | |
| comment | comment | Intentalo | |
| delete | Eliminar (X) | Intentalo | |
| edit | Editar / Lápiz | Intentalo | |
| eye | eye | Intentalo | |
| forbidden | Muestra prohibida | Intentalo | |
| forward | forward | Intentalo | |
| gear | gear | Intentalo | |
| grid | grid | Intentalo | |
| heart | Corazón / Símbolo del amor | Intentalo | |
| home | home | Intentalo | |
| info | Información | Intentalo | |
| location | Localización / GPS | Intentalo | |
| lock | Cerradura / candado | Intentalo | |
| Carta de correo | Intentalo | ||
| minus | minus | Intentalo | |
| navigation | navigation | Intentalo | |
| phone | Teléfono | Intentalo | |
| power | Encendido / apagado) | Intentalo | |
| plus | plus | Intentalo | |
| recycle | recycle | Intentalo | |
| refresh | refresh | Intentalo | |
| search | search | Intentalo | |
| shop | Tienda / Pag / monedero | Intentalo | |
| star | star | Intentalo | |
| tag | tag | Intentalo | |
| user | Usuario / persona | Intentalo | |
| video | Camara de video | Intentalo |