web-dev-qa-db-fra.com

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 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>
htmlcsshtml5css3font-awesome
78
user2275855

Vous pouvez utiliser une autre balise au lieu de input et appliquer FontAwesome normalement.

à la place de votre input avec le type image, vous pouvez utiliser ceci:

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

quick CSS:

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

Voici un rapide violon: DEMO

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

Le bouton de solution 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 quel tag} _

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

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

CSS:

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

HTML:

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

Les glyphes peuvent être passés en tant que valeurs de l'attribut value. Les codes ascii pour les lettres/icônes individuelles se trouvent dans le fichier css de FontAwesome. Il vous suffit de les changer en un numéro ascii HTML tel que \f002 en &#xf002; et cela devrait fonctionner.

Lien vers FontAwesome code ascii (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 élément input 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 été modifié 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 le lien vers la mise à jour ci-dessous. Merci!

101
Martin Turjak

Voici une solution qui fonctionne avec une syntaxe géniale avec les polices CSS et standard, sans avoir besoin de valeurs unicode, etc.

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

  2. Utilisez le positionnement relatif avec un ordre de couche supérieur (index z) 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 envoyer les données, via JS standard.

Reportez-vous aux trois extraits de code ci-dessous pour 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>

40
ethanpil

Pour ceux qui se demandent comment obtenir une entrée drupal des icônes FontAwesome, vous devez d’abord décoder_entités de la manière suivante:

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

Changez votre entrée en un élément de bouton et vous pourrez y utiliser les classes Font Awesome. 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 de gestionnaires d'événements pour les éléments qui ne sont pas des boutons mais qui en ressemblent.

4
cimmanon
.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
dxpkumar