¿Cómo agrego un icono de Font Awesome al campo de entrada?

¿Cómo utilizo el icono de búsqueda incluido en Font Awesome para ingresar datos? Tengo una función de búsqueda en mi sitio (basada en PHPmotion), que quiero usar para la búsqueda.

Aquí está el 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>

Puede usar otra etiqueta en lugar de inputy aplicar FontAwesome de la forma habitual.

en lugar de su inputtipo con image, puede usar esto:

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

CSS rápido :

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

Aquí hay un violín rápido: DEMO

Puede diseñarlo un poco mejor y agregar funcionalidad de evento al objeto i, lo que puede hacer usando un <button type="submit">objeto en lugar de i, o con javascript.

La solución del botón sería algo como esto:

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

Y el CSS :

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

aquí está mi violín actualizado con el botón en lugar de i: DEMO

Actualización: uso de FontAwesome en cualquier etiqueta

El problema con FontAwsome es que su hoja de estilo usa :beforepseudo-elementos para agregar los iconos a un elemento, y los pseudo elementos no funcionan / no están permitidos en los inputelementos. Es por eso que usar FontAwesome de la manera normal no funcionará con input.

Pero hay una solución : puede usar FontAwesome como una fuente normal así:

CSS:

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

HTML:

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

Los glifos se pueden pasar como valores del valueatributo. Los códigos ASCII para las letras individuales / iconos se pueden encontrar en el archivo css FontAwesome, sólo tiene que cambiarlos en un número ASCII HTML como \f002a y debería funcionar.

Enlace al código ascii de FontAwesome ( hoja de referencia ): fortawesome.github.io/Font-Awesome/cheatsheet

El tamaño de los iconos se puede ajustar fácilmente mediante font-size.

Vea el ejemplo anterior usando un inputelemento en un jsfidde:

MANIFESTACIÓN

Actualización: FontAwesome 5

Con FontAwesome versión 5, el CSS requerido para esta solución ha cambiado: el nombre de la familia de fuentes ha cambiado y se debe especificar el peso de la fuente:

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

Vea el comentario de @WillFastie con el enlace al violín actualizado a continuación. ¡Gracias!

Aquí hay una solución que funciona con CSS simple y una impresionante sintaxis de fuente estándar, sin necesidad de valores Unicode, etc.

1. Cree una <input>etiqueta seguida de una <i>etiqueta estándar con el icono que necesita.

2. Utilice el posicionamiento relativo junto con un orden de capa superior (índice z) y mueva el icono sobre y encima del campo de entrada.

3. (Opcional) Puede activar el icono, quizás para enviar los datos, a través de JS estándar.

Vea los tres fragmentos de código a continuación para HTML / CSS / JS.

O lo mismo en JSFiddle aquí: Ejemplo: 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 aquellos que se preguntan cómo obtener íconos de FontAwesome en la entrada de drupal, primero deben decode_entities así:

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

Cambie su entrada a un elemento de botón y podrá usar las clases Font Awesome en él. La alineación del glifo no es muy buena en la demostración, pero entiendes la idea:

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

La ventaja aquí es que el formulario sigue siendo completamente funcional sin tener que agregar controladores de eventos para elementos que no son botones pero que parecen uno.

Similar a la respuesta principal, utilicé el carácter Unicode en la sección value = del HTML y llamé FontAwesome como la familia de fuentes en ese elemento de entrada. Lo único que agregaré que la respuesta superior no cubre es que debido a que mi elemento de valor también tenía texto dentro después del ícono, cambiar la familia de fuentes a FontAwesome hizo que el texto normal se viera mal. La solución fue simplemente cambiar el CSS para incluir fuentes de respaldo:

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

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

De esta manera, FontAwesome tomará el ícono, pero todo el texto que no sea un ícono tendrá la fuente deseada 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>

forma sencilla de nueva fuente impresionante

  <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 trabajar esto con unicode o fontawesome, debe agregar un intervalo con una clase como la siguiente, porque la etiqueta de entrada no admite pseudo clases como: after. esta no es una solución directa

en html:

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

en 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;   

}