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


89

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

Respuestas:


113

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 &#xf002;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!


2
@HTMLDeveloper, el problema es la forma en que FontAwesome se aplica normalmente ... ya que usa :beforey, por lo tanto, no funcionará con etiquetas inputo img... pero hay una solución simple, a saber, usar FontAwesome como fuente regular ... ver mi solución actualizada encima. Espero recuperar el voto ;-)
Martin Turjak

11
Boo on you @HTMLDeveloper ... declaró claramente en su respuesta (en todas las ediciones, lo verifiqué) que no se puede aplicar un estilo Font Awesome a una etiqueta de entrada. Luego pasó a publicar varias soluciones diferentes y solo una de las cuales incluía el uso de un botón. Luego procedió a usar su respuesta exacta en la suya. Mala forma.
o_O

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

1
@Vadorequest gracias! buena idea ... Agregué el enlace a la respuesta ^ _ ^
Martin Turjak

2
+1 fkn truco enorme !! gracias, me preguntaba por qué & # xf002; no se mostraba en la entrada gracias a que se dio cuenta de que era agregar la familia de fuentes: FontAwesome; me salvaste: D
itsme

44

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>


10

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('&#xf014;'), // code for FontAwesome trash icon
// etc.
);

4

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.


1

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.


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

0

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>

-4

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;   

}

7
pregunta sobre la etiqueta de entrada que respondió para la etiqueta de intervalo
o_O

En realidad, la única respuesta sobre la aplicación a las entradas de texto en lugar de los botones, entonces +1.
BorisOkunskiy

1
@incarnate en realidad, esta respuesta no aplica el estilo a un campo de entrada sino a un intervalo, mientras que MartinTurjak ofrece una solución completa (y alternativas adicionales) en su respuesta anterior .
BobbyZ

Realmente quise decir entradas de texto aquí, ya que el asunto dice "¿Cómo agrego un icono de Font Awesome al campo de entrada?" - y no menciona nada sobre botones. MartinTurjak describe buenas formas de aplicar estilo a los botones, no a los campos de texto.
BorisOkunskiy
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.