How to include Bootstrap Glyphicon inside the "<input></input>" tag?

Question

With the following code:

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

I can create buttons like these:

But I can’t seem to do input:

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

Answer 1

Buttons of the type input, do not allow code html, for this use:

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

Look at this question Should I use input type="Submit" or button type="Submit" in forms?, related to your doubt.

Answer 2

To get buttons with icon, keeping the input tag:

A very simple solution is to use the label and hide the 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">

Explanation: When you define a label for=, the click label is propagated to the corresponding input.

To place icons in text fields:

In this case, we "surround" the input with a div, by 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 the position: relative in div which encompasses the icon, for the absolute icon function properly.

See example on JS Fiddle