Ícones jQuery
Para adicionar um ícone para o seu <a> e <button> elementos em jQuery Mobile, use a classe ícone e posicionar o ícone como mostrado abaixo (a única exceção é botões em navbars, que são mostrados mais abaixo):
<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 adicionar um ícone para os seus <input> botões, use o data-icon atributo:
<input type="button" value="Refresh page" data-icon="refresh" >
Try it
Para adicionar um ícone para o seu navbar botões, usar o atributo-icon dados:
<a href="#anylink" data-icon="refresh" >Refresh Page</a>
Try it
Para adicionar um ícone para listar seus botões, usar o atributo-icon dados sobre <li> :
<li data-icon="refresh" ><a href="#">Click me</a></li>
Try it
Abaixo listamos todos os ícones disponíveis que jQuery Mobile fornece:
| Valor | Descrição | Ícone | Exemplo |
|---|---|---|---|
| action | Ação (seta para a direita fora de uma caixa) | Tente | |
| alert | alert | Tente | |
| audio | Audio / Som / Speakers | Tente | |
| arrow-d-l | A seta que aponta para baixo, para a esquerda | Tente | |
| arrow-d-r | Seta que aponta para baixo à direita | Tente | |
| arrow-u-l | A seta que aponta para cima, para a esquerda | Tente | |
| arrow-u-r | Seta que aponta para cima à direita | Tente | |
| arrow-l | Seta apontando para a esquerda | Tente | |
| arrow-r | Seta para a direita | Tente | |
| arrow-u | Seta apontando para cima | Tente | |
| arrow-d | Seta apontando para baixo | Tente | |
| back | Voltar (seta curva apontando para a esquerda para cima) | Tente | |
| bars | Bares (três barras horizontais uns sobre os outros) | Tente | |
| bullets | Balas (três balas horizontal uns sobre os outros) | Tente | |
| calendar | calendar | Tente | |
| camera | camera | Tente | |
| carat-d | Carat apontando para baixo | Tente | |
| carat-l | Carat apontando para a esquerda | Tente | |
| carat-r | Carat apontando para a direita | Tente | |
| carat-u | Carat apontando para cima | Tente | |
| check | Checkmark | Tente | |
| clock | clock | Tente | |
| cloud | cloud | Tente | |
| comment | comment | Tente | |
| delete | Excluir (X) | Tente | |
| edit | Editar / Lápis | Tente | |
| eye | eye | Tente | |
| forbidden | sinal proibido | Tente | |
| forward | forward | Tente | |
| gear | gear | Tente | |
| grid | grid | Tente | |
| heart | Símbolo do coração / amor | Tente | |
| home | home | Tente | |
| info | Em formação | Tente | |
| location | Localização / GPS | Tente | |
| lock | Bloqueio / cadeado | Tente | |
| Mail / Letter | Tente | ||
| minus | minus | Tente | |
| navigation | navigation | Tente | |
| phone | Telefone | Tente | |
| power | Alimentação (on / off) | Tente | |
| plus | plus | Tente | |
| recycle | recycle | Tente | |
| refresh | refresh | Tente | |
| search | search | Tente | |
| shop | Shop / Pag / bolsa | Tente | |
| star | star | Tente | |
| tag | tag | Tente | |
| user | User / Pessoa | Tente | |
| video | Câmera de vídeo | Tente |