Como adiciono um ícone Font Awesome ao campo de entrada?

Como faço para usar o ícone de pesquisa incluído no Font Awesome para entrada? Eu tenho um recurso de pesquisa em meu site (baseado no PHPmotion) que desejo usar para a pesquisa.

Aqui está o código:

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

Você pode usar outra tag em vez de inpute aplicar FontAwesome da maneira normal.

em vez de inputcom tipo, imagevocê pode usar isto:

<i class="icon-search icon-2x"></i>

CSS rápido :

.icon-search {
    color:white;
    background-color:black;
}

Aqui está um violino rápido: DEMO

Você pode estilizá-lo um pouco melhor e adicionar funcionalidade de evento ao objeto i, o que pode ser feito usando um <button type="submit">objeto em vez de iou com javascript.

A solução do botão seria algo assim:

<button type="submit" class="icon-search icon-large"></button>

E o CSS :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

aqui está meu violino atualizado com o botão em vez de i: DEMO

Atualização: Usando FontAwesome em qualquer tag

O problema com FontAwsome é que sua folha de estilo usa :beforepseudo-elementos para adicionar os ícones a um elemento - e pseudo-elementos não funcionam / não são permitidos nos inputelementos. É por isso que usar FontAwesome da maneira normal não funcionará input.

Mas há uma solução - você pode usar FontAwesome como uma fonte regular, assim:

CSS:

input[type="submit"] {
    font-family: FontAwesome;
}

HTML:

<input type="submit" class="search" value="&#xf002;" />

Os glifos podem ser passados ​​como valores do valueatributo. Os códigos ASCII para as letras / ícones individuais podem ser encontrados no arquivo css FontAwesome, você só precisa mudá-los para um número ASCII HTML como \f002em e deve funcionar.

Link para o código ascii FontAwesome ( cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet

O tamanho dos ícones pode ser facilmente ajustado via font-size.

Veja o exemplo acima usando um inputelemento em um jsfidde:

DEMO

Atualização: FontAwesome 5

Com o FontAwesome versão 5, o CSS necessário para esta solução mudou - o nome da família da fonte mudou e a espessura da fonte deve ser especificada:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

Veja o comentário de @WillFastie com o link para o violino atualizado abaixo. Obrigado!

Aqui está uma solução que funciona com CSS simples e sintaxe de fonte padrão incrível, sem necessidade de valores Unicode, etc.

1. Crie uma <input>tag seguida por uma <i>tag padrão com o ícone de que você precisa.

2. Use o posicionamento relativo junto com uma ordem de camada superior (índice z) e mova o ícone para cima e para cima do campo de entrada.

3. (Opcional) Você pode tornar o ícone ativo, para talvez enviar os dados, via JS padrão.

Veja os três trechos de código abaixo para HTML / CSS / JS.

Ou o mesmo em JSFiddle aqui: Exemplo: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

Para aqueles que estão se perguntando como obter os ícones FontAwesome para a entrada drupal, você deve primeiro decodificar_entidades como:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);

Mude sua entrada para um elemento de botão e você pode usar as classes Font Awesome nele. O alinhamento do glifo não é muito bom na demonstração, mas você entendeu:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

A vantagem aqui é que o formulário ainda é totalmente funcional sem precisar adicionar manipuladores de eventos para elementos que não são botões, mas parecem um.

Semelhante à resposta principal, usei o caractere Unicode na seção value = do HTML e chamei FontAwesome como a família da fonte nesse elemento de entrada. A única coisa que acrescentarei que a resposta principal não cobre é que, como meu elemento de valor também tinha texto dentro dele após o ícone, alterar a família da fonte para FontAwesome fez com que o texto normal tivesse uma aparência ruim. A solução foi simplesmente alterar o CSS para incluir fontes alternativas:

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

Dessa forma, FontAwesome agarrará o ícone, mas todo texto que não seja de ícone terá a fonte desejada aplicada.

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

maneira simples para uma nova fonte incrível

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>

para trabalhar isso com unicode ou fontawesome, você deve adicionar um span com a classe como abaixo, porque a tag de entrada não suporta pseudo classes como: after. esta não é uma solução direta

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;   

}