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

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

Vous pouvez utiliser une autre balise au lieu de inputet appliquer FontAwesome de la manière habituelle.

au lieu de votre inputtype avec, imagevous pouvez utiliser ceci:

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

CSS rapide :

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

Voici un petit violon: DEMO

Vous pouvez le styliser un peu mieux et ajouter des fonctionnalités d'événement à l'objet i, ce que vous pouvez faire en utilisant un <button type="submit">objet à la place de iou avec javascript.

Le bouton sollution 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 violon mis à jour avec le bouton au lieu de i: DEMO

Mise à jour: utilisation de FontAwesome sur n'importe quelle balise

Le problème avec FontAwsome est que sa feuille de style utilise des :beforepseudo-éléments pour ajouter les icônes à un élément - et les pseudo éléments ne fonctionnent pas / ne sont pas autorisés sur les 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 régulière comme ceci:

CSS:

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

HTML:

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

Les glyphes peuvent être passés comme valeurs de l' valueattribut. Les codes ascii pour les lettres / icônes individuelles peuvent être trouvés dans le fichier css FontAwesome, il vous suffit de les changer en un numéro HTML ascii comme \f002à et cela devrait fonctionner.

Lien vers le code ascii de FontAwesome ( cheatsheet ): 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élément dans un jsfidde:

DEMO

Mise à jour: FontAwesome 5

Avec FontAwesome version 5, le CSS requis pour cette solution a changé - le nom de la famille de polices a changé et le poids de la police doit être spécifié:

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

Voir le commentaire de @WillFastie avec un lien vers le nouveau violon ci-dessous. Merci!

Voici une solution qui fonctionne avec un CSS simple et une syntaxe géniale de police standard, pas besoin de valeurs Unicode, etc.

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

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

3. (Facultatif) Vous pouvez activer l'icône, pour éventuellement soumettre les données, via le 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>

Pour ceux qui se demandent comment obtenir des icônes FontAwesome en entrée drupal, vous devez d'abord decode_entities comme ceci:

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

Changez votre entrée en un élément de bouton et vous pouvez utiliser les classes Font Awesome dessus. L'alignement du glyphe n'est pas génial dans la démo, mais vous voyez 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 ici est que le formulaire est toujours entièrement fonctionnel sans avoir à ajouter des gestionnaires d'événements pour les éléments qui ne sont pas des boutons mais qui en ressemblent.

Semblable à la réponse principale, j'ai utilisé le caractère unicode dans la section value = du HTML et appelé FontAwesome comme famille de polices sur cet élément d'entrée. La seule chose que j'ajouterai que la réponse principale ne couvre pas est que, parce que mon élément de valeur avait également du texte à l'intérieur après l'icône, le changement de la famille de polices en FontAwesome a rendu le texte normal mauvais. La solution consistait simplement à modifier le CSS pour inclure des polices de secours:

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

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

De cette façon, FontAwesome récupérera l'icône, mais tout texte non-icône aura la police souhaitée appliquée.

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

moyen simple pour une nouvelle police géniale

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

pour travailler avec unicode ou fontawesome, vous devez ajouter un span avec la classe comme ci-dessous, car la balise d'entrée ne prend pas en charge les pseudo-classes comme: after. ce n'est pas une solution directe

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;   

}