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