How to include Bootstrap's Glyphicon inside the "input / input" tag?

6

With the following code:

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

I can create buttons like these:

  

ButIcannotdowithinput:

<inputtype="submit" class="btn btn-primary" value="Salvar">
  <span class="glyphicon glyphicon-floppy-disk"></span>
</input>
    
asked by anonymous 22.05.2014 / 18:36

2 answers

14

Buttons of 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>

See this question I must use input type="submit" or button type="submit" in the forms? , related to your question.

    
22.05.2014 / 18:42
9

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

    
22.05.2014 / 20:26