Use Font Awesome Icon in Placeholder


111

É 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>"

Respostas:


61

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.


4
FontAwesome mostrará caracteres regulares para todos os símbolos não Unicode. Para mim, inserir uma entidade Unicode não funciona, mas colar no símbolo funciona: placeholder = " Hello"
DanielKhan

Com FontAwesome 5 use font-family: Font Awesome \ 5 Grátis; em vez de.
Andrew Schultz

1
@AndrewSchultz, font-family: Font Awesome\ 5 Free;não funciona. Eu tive que usar apenasfont-family: FontAwesome;
kanlukasz

Na verdade, você pode aplicar fontes diferentes à entrada. Eu fiz isso em uma instalação com FA5 Pro nele e apliquei font-family: 'Font Awesome 5 Pro', 'Montserrat';ao campo de pesquisa e funcionou muito bem.
Jeff W

230

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).


8
onde você conseguiu &#xF002;valor? Quero dizer, como você vai de icon-searchpara &#xF002?
Ігар Цімошка

2
Você nem precisa id="iconified"apenas adicionar class="fa"e a fonte incrível cuidará do css para você.
Pedro Hoehl Carvalho

8
Eu tive que mudar a ordem da fonte para fazê-lo funcionar: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">. Caso contrário, um símbolo contendo "fl" foi mostrado.
Guillaume Renoult

4
@ ІгарЦімошка Os códigos hexadecimais são todos mostrados na folha de
Liam George Betsworth


20

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 .


Isso também funciona para FA5 Pro usandoinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
ChrisB,

10

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'



8

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!

exemplo de espaço reservado

placeholder gif


Isso está usando Ember 1.7.1
RustyToms

Bom post para quem está usando outras tecnologias da web.
L84

1
Muito Obrigado! coçando minha cabeça um pouco. obrigado por detalhar a solução!
Moe Tsao


4

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"; }


4

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


3

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


3

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>


Esta é a resposta para Font Awesome 5. Obrigado!
laviex

1

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');
    }
});

1

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

placeholder="Edit &nbsp; &#xf040;"

CSS:

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


1

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;
}
  1. 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"...
  1. 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;
}
  1. 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


0

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>

0

À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>

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.