Ícone Impressionante da fonte dentro do elemento de entrada de texto


136

Estou tentando inserir um ícone de usuário dentro do campo de entrada de nome de usuário.

Eu tentei uma das soluções a partir de uma pergunta semelhante, sabendo que a background-imagepropriedade não funcionará, pois Font Awesome é uma fonte.

A seguir, é minha abordagem e não consigo exibir o ícone.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

Eu tenho o rosto da fonte declarado na fonte padrão awesome css, então não tinha certeza se a adição da família de fontes acima era a abordagem correta.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

O que você quer saber? Qual é a pergunta / erro?
Allcaps

@allcaps Opa ... Eu admito que não há como identificar o erro que estou encontrando apenas olhando para a minha postagem original. Eu editei um pouco.
Seong Lee

Veja minha resposta atualizada.
Allcaps

Respostas:


107

Você está certo. : before e: after o pseudo conteúdo não se destina a trabalhar com elementos imge inputelementos substituídos . Adicionar um elemento de quebra automática e declarar uma família de fontes é uma das possibilidades, assim como usar uma imagem de plano de fundo. Ou talvez um texto de espaço reservado html5 atenda às suas necessidades:

<input name="username" placeholder="&#61447;">

Os navegadores que não suportam o atributo placeholder simplesmente o ignoram.

ATUALIZAR

O seletor de conteúdo antes de seleciona a entrada: input[type="text"]:before. Você deve selecionar o wrapper: .wrapper:before. Veja http://jsfiddle.net/allcaps/gA4rx/ . Também adicionei a sugestão de espaço reservado onde o wrapper é redundante.

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

Cair pra trás

O Font Awesome usa a Área de uso privado Unicode (PUA) para armazenar ícones. Outros caracteres não estão presentes e retornam ao padrão do navegador. Isso deve ser o mesmo que qualquer outra entrada. Se você definir uma fonte nos elementos de entrada, forneça a mesma fonte como substituto para situações em que usamos um ícone. Como isso:

input { font-family: 'FontAwesome', YourFont; }

4
Usar o método de espaço reservado funciona. O problema é que o texto normal (sem ícone) não corresponde à face da fonte do restante da página e é exibido como serifa padrão do navegador. Alguma forma de contornar isso?
harryg

6
O Font Awesome usa a Área de uso privado Unicode (PUA) para armazenar ícones. Outros caracteres não estão presentes e retornam ao padrão do navegador. Isso deve ser o mesmo que qualquer outra entrada. Se você definir uma fonte de elementos de entrada em algum lugar, em seguida, fornecer a mesma fonte como fallback para situações onde nos usar um ícone: input { font-family: 'FontAwesome' YourFont; }. Isso ajuda? Você sempre pode fazer uma nova pergunta.
Allcaps

1
@allcaps a recomendação de usar uma família de fontes substituta para o espaço reservado funciona WONDERS !! Não pensei em alterar a fonte através de um fallback. Você pode atualizar sua resposta para incluir uma fonte substituta para futuros usuários? Obrigado!
usar o seguinte comando

Onde posso encontrar a lista de códigos. quero dizer fa-user para & # 61447;
Elyor

@ Ellyor: Você não precisa usar a entidade html. Se o seu projeto for UTF-8, você pode simplesmente copiar e colar o glifo Awesome Font. Provavelmente aparecerá como um bloco no seu editor de código, mas tudo bem. Você também pode usar um dos muitos conversores on-line de unicode em html-entidades.
Allcaps

123

Resultado:

insira a descrição da imagem aqui

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Ou)

Resultado:

insira a descrição da imagem aqui

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

2
Essa foi uma excelente dica sobre o uso de fontes incríveis com uma caixa de texto.
Sunil

É possível tornar esse ícone clicável?
precisa saber é o seguinte

5
@FrenkyB, Sim. <span class = "fa-info-circle errspan" onclick = 'YOUR_FUNCTION ()'> </span>
Palanikumar

2
A configuração z-index: 1fará a entrada subjacente capturar o foco quando você clicar no ícone - algo que você pode querer, por exemplo, ao adicionar um datepicker.
romaricdrigon

Funciona bem para mim, mas eu não uso position: relative(margens negativas não precisa dele), nem z-index(assim que o elemento é processado após a entrada)
Pierre de LESPINAY

24

Você poderia usar um invólucro. Dentro do wrapper, adicione o elemento awesome da fonte i e o inputelemento

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

defina a posição do wrapper para relativa:

.wrapper { position: relative; }

e defina a iposição do elemento como absoluta e defina o local correto para ele:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(É um truque, eu sei, mas faz o trabalho.)


2
Por que precisamos de um .wrapper lá?
Ashfaque Rifaye 28/11/19

Pelo que entendi, elementos absolutos são colocados em relação ao ancestral "posicionado" mais próximo. Posição: relativa significa que o invólucro está "posicionado" (também poderia ter sido absoluto, fixo ou adesivo). Se você não fizer isso, o ícone será absolutamente posicionado em relação a algum outro elemento mais alto no dom (ou se nenhum elemento posicionado for encontrado, em relação à viewport).
Jaqen H'ghar

20

Esta resposta funcionará para você se você precisar das seguintes condições atendidas (nenhuma das respostas atuais atendeu a essas condições):

  1. O ícone está dentro da caixa de texto
  2. O ícone não deve desaparecer quando o texto é inserido na entrada e o texto inserido vai para a direita do ícone
  3. Clicar no ícone deve colocar a entrada subjacente em foco

Acredito que 3 é o número mínimo de elementos HTML para satisfazer essas condições:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


4
A melhor resposta para ter o ícone dentro do campo de entrada, onde o ícone permanece visível enquanto o usuário digita.
ObjectiveTC

top: calc (50% - 0.5em) assume que o seu rótulo tem altura 1em
drichar

1
@richar - Acabei de testar, isso ainda funciona com qualquer altura de etiqueta. Contanto que você não alinhe verticalmente o texto do rótulo dentro do rótulo (que não é o padrão). Como alinhado ao topo por padrão, um rótulo mais alto ainda funcionará corretamente. Também testei com diferentes tamanhos de fonte na etiqueta e na entrada. Parece funcionar em todos os cenários.
Skeets

@ SkeetsO'Reilly Fico corrigido. Estou confundindo e rem. 0.5em é metade do tamanho da fonte. Grande solução, eu estou usando-o em um projeto (usando apenas SVG costume, não FA, que não tem o tamanho da fonte, o que levou ao meu problema de posicionamento e comentário mal informado)
drichar

14

Não é necessário codificar muito ... basta seguir os seguintes passos:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

você pode encontrar os links para o Unicode ( fontawesome ) aqui ...

FontAwesome para ícones


E se eu já estiver usando outra família de fontes como espaço reservado? então não vai funcionar. Existe alguma maneira de fazer o texto "Search" em "& # xf002 Search" usar fonte personalizada e o unicode ainda usar fonte fontawesome?
Sushmit Sagar

6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


Oi, por favor, anexar uma pequena explicação para você solução.
Aditya Thakur

1
Esta resposta funcionará para você se você precisar das seguintes condições atendidas (nenhuma das respostas atuais atendeu a essas condições): O ícone está dentro da caixa de texto O ícone não deve desaparecer quando o texto é inserido na entrada e o texto inserido vai para a direita do ícone Clicando no ícone deve trazer a entrada subjacente em foco acredito que 3 é o número mínimo de elementos HTML para satisfazer as condições
Ola Olushesi

5

Depois de ler várias versões desta pergunta e pesquisar, eu encontrei uma solução bastante limpa e sem js. É semelhante à solução @allcaps, mas evita que o problema da fonte de entrada seja alterado da fonte principal do documento.

Use o ::input-placeholderatributo para estilizar especificamente o texto do espaço reservado. Isso permite que você use a fonte do ícone como fonte do espaço reservado e seu corpo (ou outra fonte) como o texto de entrada real. Atualmente, você precisa especificar seletores específicos do fornecedor.

Isso funciona bem desde que você não precise de uma combinação de ícone e texto em seu elemento de entrada. Se o fizer, será necessário que o texto do espaço reservado seja a fonte padrão do navegador (serifa simples na minha) para as palavras.

Por exemplo,
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Brinque com os seletores com prefixo do navegador: http://jsfiddle.net/gA4rx/78/

Observe que você precisa definir cada seletor específico do navegador como uma regra separada. Se você combiná-los, o navegador ignorará.


Embora seja uma solução elegante, ela não atinge o comportamento esperado.
Olivier Refalo

De fato, parece que os navegadores Webkit são os únicos que aceitam font-familyesse seletor no momento. Só podemos esperar uma aceitação mais ampla no futuro.
harryg

5

Eu encontrei a maneira mais fácil usando o bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

2

Eu consegui isso assim

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

O resultado fica assim:

resultado

Nota

Observe que estou usando o Ruby on Rails, então meu código resultante parece um pouco explodido. O código de exibição no slim é realmente muito conciso:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

2

Para mim, uma maneira fácil de ter um ícone "dentro" de uma entrada de texto sem ter que tentar usar pseudoelementos com a fonte unicode incrível etc, é ter a entrada de texto e o ícone dentro de um elemento wrapper que posicionaremos em relação, e, em seguida, posicione a entrada de pesquisa e o ícone impressionante de fonte absoluto.

Da mesma forma que fazemos com imagens de fundo e texto, faríamos aqui. Eu também acho que isso é bom para iniciantes, pois o posicionamento de CSS é algo que um iniciante deve aprender no início de sua jornada de codificação, para que o código seja fácil de entender e reutilizar.

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }

1

Aproveitando a sugestão allcaps. Aqui está o método de plano de fundo incrível para fontes com a menor quantidade de HTML:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

1

Torne o ícone clicável para focar dentro do elemento de entrada de texto.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Basta adicionar o ícone que você quiser dentro da <i>tag, na biblioteca Font Awesome e aproveitar os resultados.


0
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

2
Será mais útil para o OP se você também postar alguma explicação sobre o que esse bloco de código está fazendo!
Kim

0

puramente CSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

1
Você pode explicar sua resposta, por favor?
E. Zeytinci

0

Minha solução foi ter um contêiner relativo ao redor inputpara segurar o ícone. Esse contêiner externo possui um ::afterícone com o desejado, posicionado absolutedentro do contêiner.

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

Código SASS:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

0

Minha solução para adicionar um ícone incrível de fonte dentro do elemento de entrada. Aqui está um código simples para adicionar ícone dentro do elemento de entrada. Basta copiar o código abaixo e colocar onde deseja adicionar. ou se você quiser alterar o ícone, basta inserir o código do ícone na <i> tag.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>


2
A resposta é útil, mas a frase que é spam não é permitida. Se você quiser ter algo parecido, pode colocar um link no seu perfil.
Makyen

Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Clijsters

0

Em algum momento, o ícone não será exibido devido à versão do Font Awesome. Para a versão 5, o css deve ser

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

0

Maneira fácil, mas você precisa de bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

insira a descrição da imagem aqui


-1
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

-3

Eu tentei o material abaixo e ele realmente funciona bem em HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}
<div >

    <input class="hai" placeholder="Search term">

</div>


1
a pergunta é sobre o uso de ícones de fonte impressionantes
gaitat

-5

Para trabalhar isso com unicode ou fontawesome, você deve adicionar um spancom classcomo abaixo:

Em HTML:

<span class="button1 search"></span>
<input name="username">

Em CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}

1
isso não vai colocar o ícone dentro da entrada de texto
Gianfranco P.

-9
<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.