Use Font Awesome Icon in Placeholder

É possível usar o Font Awesome Icon em um placeholder? Eu li onde HTML não é permitido em um espaço reservado. Existe uma solução alternativa?

placeholder="<i class='icon-search'></i>"

Você não pode adicionar um ícone e um texto porque não pode aplicar uma fonte diferente a parte de um espaço reservado; no entanto, se você estiver satisfeito com apenas um ícone, ele pode funcionar. Os ícones FontAwesome são apenas caracteres com uma fonte personalizada (você pode olhar no Cheatsheet FontAwesome para o caractere Unicode de escape na contentregra. Quanto menos código-fonte for encontrado em variables.less, o desafio seria trocar as fontes quando a entrada for não esvaziar. Combine-o com jQuery como este .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

Com este CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

E este (simples) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

A transição entre as fontes não será suave, entretanto.

Se você estiver usando FontAwesome 4.7isso deve ser suficiente:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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

Uma lista de códigos hexadecimais pode ser encontrada na folha de cheats do Font Awesome . No entanto, no último FontAwesome 5.0, esse método não funciona (mesmo se você usar a abordagem CSS combinada com a atualizada font-family).

Resolvi com este método:

No CSS, usei este código para a classe fontAwesome :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

No HTML, adicionei a classe fontawesome e o código do ícone fontawesome dentro do espaço reservado:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

Você pode ver no CodePen .

A resposta de @Elli pode funcionar no FontAwesome 5, mas requer o uso do nome da fonte correto e o uso do CSS específico para a versão desejada. Por exemplo, ao usar o FA5 Free, não consegui fazer funcionar se incluísse o all.css, mas funcionou bem se incluísse o solid.css:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

Para FA5 Pro, o nome da fonte é 'Font Awesome 5 Pro'

Onde houver suporte, você pode usar o ::input-placeholderpseudoseletor combinado com ::before.

Veja um exemplo em:

http://codepen.io/JonFabritius/pen/nHeJg

Eu estava trabalhando nisso e me deparei com este artigo, a partir do qual modifiquei este material:

http://davidwalsh.name/html5-placeholder-css

Estou usando o Ember (versão 1.7.1) e precisava vincular o valor da entrada e ter um espaço reservado que era um ícone FontAwesome. A única maneira de vincular o valor em Ember (que eu conheço) é usar o auxiliar integrado. Mas isso faz com que o espaço reservado seja escapado, "& # xF002" apenas aparece assim, texto.

Se você estiver usando o Ember ou não, será necessário definir o CSS do placeholder da entrada para ter uma família de fontes FontAwesome. Este é o SCSS (usando Bourbon para o estilo do marcador de posição ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Se você estiver usando apenas o guidão, como foi mencionado antes, você pode apenas definir a entidade html como o espaço reservado:

<input id="listFilter" placeholder="&#xF002;" type="text">

Se você estiver usando o Ember, vincule o marcador a uma propriedade do controlador que tenha o valor Unicode.

no modelo:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

no controlador:

listFilter: null,
listFilterPlaceholder: "\uf002"

E a vinculação de valor funciona bem!

Use placeholder=""em sua entrada. Você pode encontrar o Unicode na página FontAwesome http://fontawesome.io/icons/ . Mas você tem que adicionar style="font-family: FontAwesome;"sua contribuição.

Eu faço isso adicionando fa-placeholderclasse ao texto de entrada:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

então, em css, basta adicionar isto:

.fa-placholder { font-family: "FontAwesome"; }

Funciona bem para mim.

Atualizar:

Para alterar a fonte enquanto o usuário digita em sua entrada de texto, basta adicionar sua fonte após a fonte incrível

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Qualquer pessoa que esteja se perguntando sobre a implementação do Font Awesome 5 :

Não especifique uma família de fontes "Font Awesome 5" geral, você precisa terminar especificamente com o ramo de ícones com o qual está trabalhando. Aqui estou usando o ramo "Marcas" por exemplo.

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

Mais detalhes Use o ícone Font Awesome (5) no texto do marcador de posição de entrada

Ignorando o jQuery, isso pode ser feito usando ::placeholderum elemento de entrada.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

A parte css

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

A MELHOR PARTE: Você pode ter diferentes famílias de fontes para espaço reservado e texto

Eu sei que essa pergunta é muito antiga. Mas não vi uma resposta simples como costumava usar.

Você só precisa adicionar a fasclasse à entrada e colocar um hexadecimal válido neste caso &#xf002para o glifo do Font-Awesome como aqui<input type="text" class="fas" placeholder="&#xf002" />

Você pode encontrar o Unicode de cada glifo na web oficial aqui .

Este é um exemplo simples, você não precisa de css ou javascript.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

Há um pequeno atraso e trepidação conforme a fonte muda na resposta fornecida por Jason. Usar o evento "change" em vez de "keyup" resolve esse problema.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Adicionei texto e ícone juntos em um espaço reservado.

placeholder="Edit   "

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

Se você pode / deseja usar o Bootstrap, a solução seria grupos de entrada:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

Tem a seguinte aparência: entrada com prefixo de texto e símbolo de pesquisa

Resolvi o problema de forma um pouco diferente e funciona com qualquer ícone FA por meio de código html. Em vez de todas essas dificuldades com o espaço reservado, minha solução é:

1. Para colocar um ícone da maneira usual

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. Em seguida, ajuste o texto do marcador (é pessoal para todos, no meu caso, um ícone estava logo antes do texto)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Aqui está o problema que um ícone está acima de nossa entrada e bloqueia o cursor para clicar, então devemos adicionar mais uma linha em nosso CSS

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. Mas um ícone não desaparece junto com o espaço reservado, então precisamos corrigi-lo. E também esta é a versão final da minha solução:

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

É mais difícil do que eu pensava antes, mas espero ter ajudado alguém com isso.

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

A solução Teocci é tão simples quanto pode ser, portanto, não há necessidade de adicionar nenhum CSS, apenas adicione class = "fas" para Font Awesome 5, uma vez que adiciona declaração de fonte CSS adequada ao elemento.

Aqui está um exemplo de caixa de pesquisa dentro da barra de navegação do Bootstrap, com o ícone de pesquisa adicionado ao grupo de entrada e ao espaço reservado (para fins de demonstração, é claro, ninguém usaria os dois ao mesmo tempo). Imagem: https://i.imgur.com/v4kQJ77.png "> Código:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Às vezes, acima de tudo, responda sem despertar, quando você pode usar o truque abaixo

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>