Iconos de botones de jQuery Mobile

El conjunto de iconos proporcionado por jQuery Mobile puede hacer que sus botones sean más atractivos.

Agregar icono a botones de jQuery Mobile

Para agregar un icono a su botón, utilice la propiedad data-icon:

<a href="#anylink" data-role="button" data-icon="search">Buscar</a>

Consejo:También puede usar la propiedad data-icon en elementos <button> o <input>.

A continuación, se enumeran algunos iconos disponibles proporcionados por jQuery Mobile:

Valor de la propiedad Descripción Icono Ejemplo
data-icon="arrow-l" flecha izquierda Prueba
data-icon="arrow-r" flecha derecha Prueba
data-icon="delete" Eliminar Prueba
data-icon="info" Información Prueba
data-icon="home" Página principal Prueba
data-icon="back" Volver Prueba
data-icon="search" Búsqueda Prueba
data-icon="grid" Cuadrícula Prueba

Para obtener información completa sobre los iconos de botones de jQuery Mobile, visite nuestra Manual de referencias de iconos de jQuery Mobile.

Ubicar el icono

También puede definir la posición donde se colocará el icono: arriba, derecha, abajo o izquierda.

Utilice la propiedad data-iconpos para definir la posición:

Posición del icono:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">arriba</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">derecha</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">abajo</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Izquierda</a>

Prueba personalmente

Consejo:Por defecto, los iconos de todos los botones se colocan a la izquierda.

Mostrar solo el icono

Si solo se debe mostrar el icono, configure data-iconpos como "notext":

Atrás:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Buscar</a>

Prueba personalmente