Comment ajouter une icône Font Awesome à un champ de saisie ?

Question

Comment utiliser l'icône de recherche incluse dans Font Awesome pour la saisie ? J'ai une fonction de recherche sur mon site (basée sur PHPmotion), que je veux utiliser pour la recherche.

Voici le code :

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

Answer 1

Vous pouvez utiliser une autre balise à la place de input et appliquer FontAwesome de la manière habituelle.

au lieu de votre input avec le type image vous pouvez utiliser ceci :

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

rapide CSS :

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

Voici un petit truc : DEMO

Vous pouvez le styliser un peu mieux et ajouter une fonctionnalité d'événement, à l'objet i, ce que vous pouvez faire en utilisant une fonction <button type="submit"> au lieu de i ou avec javascript.

La solution du bouton serait quelque chose comme ceci :

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

Et le CSS :

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

voici mon fiddle mis à jour avec le bouton à la place du i : DEMO

---

Mise à jour : Utilisation de FontAwesome sur n'importe quel tag

Le problème avec FontAwsome est que sa feuille de style utilise :before pseudo-éléments pour ajouter les icônes à un élément - et les pseudo-éléments ne fonctionnent pas/ne sont pas autorisés sur input éléments. C'est pourquoi l'utilisation de FontAwesome de manière normale ne fonctionnera pas avec input .

Mais il existe une solution - vous pouvez utiliser FontAwesome comme une police ordinaire comme ceci :

CSS :

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

HTML :

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

Les glyphes peuvent être transmis en tant que valeurs de la fonction value attribut. Les codes ascii des lettres/icônes individuelles se trouvent dans le fichier css de FontAwesome, il suffit de les transformer en un nombre ascii HTML comme suit \f002 à  et cela devrait fonctionner.

Lien vers le site FontAwesome code ascii ( antisèche ) : fortawesome.github.io/Font-Awesome/cheatsheet

La taille des icônes peut être facilement ajustée via font-size .

Voir l'exemple ci-dessus en utilisant un input dans un jsfidde :

DEMO

Answer 2

Voici une solution qui fonctionne avec de simples CSS et une syntaxe standard pour les awesome font, pas besoin de valeurs unicode, etc.

1. Créer un <input> suivie d'une balise standard <i> avec l'icône dont vous avez besoin.

2. Utilisez le positionnement relatif ainsi qu'un ordre de calque plus élevé (z-index) et déplacez l'icône au-dessus du champ de saisie.

3. (Facultatif) Vous pouvez rendre l'icône active, pour éventuellement soumettre les données, via un JS standard.

Voir les trois extraits de code ci-dessous pour le HTML / CSS / JS.

Ou la même chose dans JSFiddle ici : Exemple : 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>

Answer 3

Pour ceux qui se demandent comment obtenir les icônes de FontAwesome dans l'entrée de Drupal, vous devez d'abord décoder les entités comme ceci :

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

Answer 4

Changez votre entrée en un élément de bouton et vous pouvez utiliser les classes Font Awesome sur celui-ci. L'alignement du glyphe n'est pas parfait dans la démo, mais vous avez compris l'idée :

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

L'avantage est que le formulaire reste entièrement fonctionnel sans avoir à ajouter des gestionnaires d'événements pour des éléments qui ne sont pas des boutons mais qui y ressemblent.

Answer 5

pour que cela fonctionne avec unicode ou fontawesome, vous devez ajouter un span avec une classe comme ci-dessous, car la balise input ne supporte pas les pseudo classes comme :after. ce n'est pas une solution directe

en html :

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

dans le 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;   

}