7

Com o seguinte código:

<a href="#" class="btn btn-primary">
  <span class="glyphicon glyphicon-pencil"></span> Editar
</a>

Eu consigo criar botões como esses:

inserir a descrição da imagem aqui

Porém não estou conseguindo fazer com input:

<input type="submit" class="btn btn-primary" value="Salvar">
  <span class="glyphicon glyphicon-floppy-disk"></span>
</input>
0

2 Respostas 2

15

Botões do tipo input, não permitem código html, para isto use:

<button type="submit" class="btn btn-primary" value="Salvar">
  <span class="glyphicon glyphicon-floppy-disk"></span>
</button>

Veja esta pergunta Devo usar input type="submit" ou button type="submit" nos formulários?, relacionada a sua dúvida.

1
  • Apesar da outra resposta ser mais completa, esta foi a que melhor me serviu.
    – user7261
    23/05/2014 às 12:05
10

Para obter botões com ícone, mantendo a tag input:

Uma solução bem simples é usar o label do submit como pseudo-botão, e esconder o submit original:

<label for="salvar" class="btn"><i class="glyphicon glyphicon-floppy-disk"></i>Salvar</label>
<input id="salvar" name="salvar" type="submit" value="Salvar" class="hidden">

Explicação: Quando você define um label for=, o click no label é propagado para o input correspondente.


Para colocar ícones nos campos de texto:

Neste caso, "cercamos" o input com uma div, colocando o ícone sobreposto ao input, e adicionando um padding à esquerda do campo:

HTML:

<div class="iconInput">
   <i class="glyphicon glyphicon-file"></i>
   <input type="text" class="form-control" placeholder="Nome do arquivo" />
</div>

CSS:

.iconInput { position: relative }
.iconInput input { padding-left: 28px }
.iconInput i { position: absolute; padding: 9px 10px }

Importante o position: relative na div que engloba o ícone, para o absolute do ícone funcionar corretamente.

Veja exemplo no JS Fiddle

Você deve fazer log-in para responder a esta pergunta.