For buttons with an icon, holding the input tag:
A very simple solution is to use label
of submit as a pseudo-button, and hide the original submit
:
<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">
Explanation: When you set a label for=
, the click in the label is propagated to the corresponding input.
To place icons in text fields:
In this case, "surround" the input with a div
, placing the icon superimposed on the input, and adding a padding to the left of the field:
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 }
Important position: relative
in div
that encompasses the icon, so the absolute
of the icon works correctly.
See example in JS Fiddle