Como posso adicionar um glifo a uma caixa de entrada de tipo de texto? Por exemplo, eu quero ter 'icon-user' em uma entrada de nome de usuário, algo como isto:

Sem o Bootstrap:

Vamos chegar ao Bootstrap em um segundo, mas aqui estão os conceitos fundamentais de CSS em jogo para fazer isso você mesmo. Como barba de presa aponta , você pode fazer isso com CSS posicionando absolutamente o ícone dentro do elemento de entrada. Em seguida, adicione preenchimento a ambos os lados para que o texto não se sobreponha ao ícone.

Portanto, para o seguinte HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Você pode usar o seguinte CSS para alinhar os glifos esquerdo e direito:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demonstração em Plunker

Nota : Isso pressupõe que você esteja usando glyphicons , mas funciona igualmente bem com fontes incríveis .
Para FA, basta substituir.glyphicon por.fa

Com o Bootstrap:

Como o buffer aponta , isso pode ser realizado de forma nativa no Bootstrap usando Estados de Validação com Ícones Opcionais . Isso é feito fornecendo ao .form-groupelemento a classe de .has-feedbacke o ícone a classe de .form-control-feedback.

O exemplo mais simples seria algo como isto:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Prós :

• Inclui suporte para diferentes tipos de formulário (Básico, Horizontal, Inline)
• Inclui suporte para diferentes tamanhos de controle (Padrão, Pequeno, Grande)

Contras :

• Não inclui suporte para ícones de alinhamento esquerdo

Para superar os contras, montei essa solicitação de puxar com alterações para dar suporte aos ícones alinhados à esquerda. Por se tratar de uma mudança relativamente grande, ela foi adiada para uma versão futura, mas se você precisar desses recursos hoje , aqui está um guia de implementação simples:

Apenas inclua as alterações no formulário em css (também destacadas por meio do snippet de pilha oculto na parte inferior)
_{* MENOS : alternativamente, se você estiver construindo por menos , aqui está o formulário muda em menos}

Então, tudo o que você precisa fazer é incluir a classe .has-feedback-leftem qualquer grupo que tenha a classe .has-feedbackpara alinhar à esquerda o ícone.

Como existem muitas configurações possíveis de html em diferentes tipos de formulários, diferentes tamanhos de controle, diferentes conjuntos de ícones e diferentes visibilidades de rótulo, criei uma página de teste que mostra o conjunto correto de HTML para cada permutação, juntamente com uma demonstração ao vivo.

Aqui está uma demonstração no Plunker

A sugestão do PS frizi de adicionar pointer-events: none;foi adicionada ao bootstrap

Não encontrou o que estava procurando ? Tente estas perguntas semelhantes:

• Adicionar ícone de inicialização do Twitter à caixa de entrada
• Coloque o ícone de pesquisa próximo ao bootstrap da caixa de texto

CSS adicional para ícones de feedback alinhados à esquerda

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

O método oficial . Não é necessário CSS personalizado:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Esta demonstração é baseada em um exemplo nos documentos do Bootstrap. Role para baixo até "Com ícones opcionais" aqui http://getbootstrap.com/css/#forms-control-validation

Aqui está uma alternativa apenas para CSS. Configurei isso para um campo de pesquisa para obter um efeito semelhante ao Firefox (e centenas de outros aplicativos.)

Aqui está um violino .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Aqui está como eu fiz isso usando apenas o CSS de inicialização padrão v3.3.1:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

E é assim que parece:

Esse 'truque' funcionará com o efeito colateral de que a classe glyphicon alterará a fonte do controle de entrada.

Violino

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Se você quiser se livrar do efeito colateral, remova a classe "glyphicon" e adicione o seguinte CSS (pode haver uma maneira melhor de estilizar o pseudo elemento do espaço reservado e testei apenas no Chrome).

Violino

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Possivelmente uma solução ainda mais limpa:

Violino

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Isso pode ser feito usando classes da versão oficial do bootstrap 3.x, sem nenhum css personalizado.

Use input-group-addonantes da tag de entrada e, em input-groupseguida, use qualquer um dos glyphicons. Aqui está o código

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Aqui está a saída

Para personalizá-lo, adicione ainda algumas linhas de css personalizadas ao seu próprio arquivo custom.css (ajuste o preenchimento, se necessário)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Ao tornar o plano de fundo input-group-addontransparente e fazer com que o gradiente esquerdo da tag de entrada seja zerado, a entrada terá uma aparência uniforme. Aqui está a saída personalizada

Aqui está um jsbin exemplo de

Isso resolverá os problemas css personalizados de sobreposição com etiquetas, alinhamento durante o uso input-lge foco na questão da guia.

Aqui está uma solução que não é de autoinicialização que simplifica sua marcação incorporando a representação da imagem do glifo diretamente no CSS usando a codificação URI base64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Se você estiver usando o Fontawesome, pode fazer o seguinte:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Resultado

A lista completa de unicode pode ser encontrada na referência completa do ícone The Font Awesome 4.6.3

Aqui está outra maneira de fazer isso, colocando o glyphicon usando o :beforepseudo elemento no CSS.

Demonstração de trabalho no jsFiddle

Para este HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Use este CSS ( compatível com Bootstrap 3.xe navegadores baseados em Webkit )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Como o @Frizi disse, temos que adicionar pointer-events: none; para que o cursor não interfira no foco de entrada. Todas as outras regras CSS são para centralizar e adicionar o espaçamento adequado.

O resultado:

Você pode usar seu HTML Unicode

Para adicionar um ícone de usuário, basta adicionar aoplaceholder atributo ou onde você quiser.

Você pode verificar esta folha de dicas .

Exemplo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Não se esqueça de definir a fonte da entrada como Glyphicon, usando o seguinte código:, em font-family: 'Glyphicons Halflings', Arialque Arial é a fonte do texto normal na entrada.

Eu também tenho uma decisão para este caso com o Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Na entrada, tenho algo parecido com isto:

Testado com o Bootstrap 4.

Pegue um form-controle adicione is-validà sua classe. Observe como o controle fica verde, mas mais importante, observe o ícone de marca de seleção à direita do controle? Isto é o que queremos!

Exemplo:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Se você tiver a sorte de precisar apenas de navegadores modernos: tente css transform translate. Isso não requer invólucros e pode ser personalizado para permitir mais espaçamento para a entrada [type = number] para acomodar o controle giratório de entrada ou movê-lo para a esquerda da alça.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Você deve conseguir fazer isso com as classes de inicialização existentes e com um pouco de estilo personalizado.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Editar O ícone é referenciado através da icon-userclasse. Esta resposta foi escrita no momento da versão 2. do Bootstrap. Você pode ver a referência na página a seguir: http://getbootstrap.com/2.3.2/base-css.html#images