[Tips] Utilizar iconos personalizados con JQueryMobile
JqueryMobile nos ofrece una colección de iconos que podemos utilizar en los botones que definamos, en dicha colección podremos tenemos los siguientes diseños:
Además podemos variar el tema de estos iconos al setear el atributo data-theme del botón, puedes ver más info en :
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-icons.html
Sin embargo, es muy posible, que necesitemos utilizar otro icono, uno personalizado, debemos especificar el valor del data-icon, con un nombre, este nombre debe provenir de una regla css con el prefijo ui-icon-[Nombre]. Para mantener una consistencia visual con los iconos por defecto, se deben crear íconos con color blanco de 18x 18 pixeles y guardados como PNG-8 con transparencia.
Personalmente, como no soy diseñador, busqué en www.iconfinder.com y seleccioné esta galería:
http://www.iconfinder.com/search/?q=iconset%3Asocial
Luego con Paint.NET modifiqué el tamaño a 18X18 y lo guarde con el nombre twitter1.png
Entonces, en mi página agregué el estilo:
.ui-icon-twitter {
background: url("twitter1.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}
Luego para el botón:
<input type="submit" value="Twitter" data-icon="twitter">
Y el resultado:
Como vez, el nombre al que hace referencia data-icon es el nombre de la clase sin el prefijo .ui-icon.
Espero que te sirva!
Saludos,
Gonzalo