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:
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:
Respostas:
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; }
Nota : Isso pressupõe que você esteja usando glyphicons , mas funciona igualmente bem com fontes incríveis .
Para FA, basta substituir.glyphicon
por.fa
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-group
elemento a classe de .has-feedback
e 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 :
Contras :
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-left
em qualquer grupo que tenha a classe .has-feedback
para 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.
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:
.focusedInput
classe é definida depois .input-group-addon
disso, quando as folhas de estilo são exibidas em cascata , os últimos estilos devem ter precedência. Você pode descrever melhor o cenário que levou a esse problema?
<i class="icon-user"></i>
para <i class="fa fa-user"></i>
. Sempre que você estiver pensando em atualizar bibliotecas externas, leia as notas de versão e a nova documentação para determinar se seu aplicativo ainda é compatível ou precisa ser atualizado.
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
{left:0}
à classe glyphicon deve cuidar do alinhamento à esquerda. jsfiddle.net/LS2Ek/30 . Mas eu gosto da sua abordagem de contorno + sombra de caixa. Parece arrumado!
left:0
não identifica mais o início da entrada. Você também precisará adicionar preenchimento à esquerda da entrada e removê-lo à direita. Ainda assim, uma solução muito agradável e limpa. Eu acho que identificar a esquerda da entrada é a parte mais difícil, e é aí que um invólucro position:relative
é útil.
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.)
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.
<input class="form-control glyphicon" type="search" placeholder=""/>
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).
.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:
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=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
Isso pode ser feito usando classes da versão oficial do bootstrap 3.x, sem nenhum css personalizado.
Use input-group-addon
antes da tag de entrada e, em input-group
seguida, 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-addon
transparente 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-lg
e 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="" />
Resultado
A lista completa de unicode pode ser encontrada na referência completa do ícone The Font Awesome 4.6.3
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">
Aqui está outra maneira de fazer isso, colocando o glyphicon usando o :before
pseudo elemento no CSS.
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:
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=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" 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', Arial
que 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>
Pegue um form-control
e 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>
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-user
classe. 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