Ícones de botão do jQuery Mobile

O conjunto de ícones fornecido pelo jQuery Mobile pode tornar seus botões mais atraentes.

Adicionar ícones a botões do jQuery Mobile

Para adicionar ícones aos seus botões, use a propriedade data-icon:

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

Dica:Você também pode usar a propriedade data-icon em elementos <button> ou <input>.

A seguir, listamos alguns ícones disponíveis fornecidos pelo jQuery Mobile:

valor da propriedade descrição ícone exemplo
data-icon="arrow-l" seta para a esquerda teste
data-icon="arrow-r" seta para a direita teste
data-icon="delete" excluir teste
data-icon="info" informações teste
data-icon="home" página inicial teste
data-icon="back" voltar teste
data-icon="search" pesquisa teste
data-icon="grid" grade teste

Para informações completas sobre ícones de botões do jQuery Mobile, acesse nossa Manual de Referência de Ícones do jQuery Mobile.

Posicionar o ícone

Você também pode definir onde o ícone será colocado: acima, à direita, abaixo ou à esquerda.

Use a propriedade data-iconpos para definir a posição:

Posição do ícone:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">cima</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">direita</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">abaixo</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Esquerda</a>

Experimente você mesmo

Dica:Por padrão, todos os ícones dos botões estão posicionados à esquerda.

Mostrar apenas o ícone

Se precisar apenas mostrar o ícone, configure o data-iconpos como "notext":

Voltar:

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

Experimente você mesmo