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


89

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>

Réponses:


112

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


2
@HTMLDeveloper le problème est la façon dont FontAwesome est normalement appliqué ... tel qu'il l'utilise :beforeet ne fonctionnera donc pas avec les balises inputou img... mais il existe une solution simple - à savoir, utiliser FontAwesome comme police régulière ... au dessus. J'espère gagner le vote ;-)
Martin Turjak

11
Boo on you @HTMLDeveloper ... il a clairement indiqué dans sa réponse (dans toutes les modifications, j'ai vérifié) que vous ne pouvez pas appliquer un style Font Awesome à une balise d'entrée. Il a ensuite posté plusieurs solutions différentes et dont une seule incluait l'utilisation d'un bouton. Vous avez ensuite utilisé sa réponse exacte dans la vôtre. Mauvaise forme.
o_O

1
Lien vers le code ascii ( cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet
Vadorequest

1
@Vadorequest merci! bonne idée ... j'ai ajouté le lien vers la réponse ^ _ ^
Martin Turjak

2
+1 fkn énorme tour !! merci je me demandais pourquoi & # xf002; n'apparaissait pas en entrée grâce à vous et j'ai réalisé que c'était pour ajouter la famille de polices: FontAwesome; vous m'avez sauvé: D
itsme

44

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>


10

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

4

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.


1

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.


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

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>

-4

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;   

}

7
question posée pour la balise d'entrée à laquelle vous avez répondu pour la balise span
o_O

En fait, la seule réponse concernant l'application aux entrées de texte au lieu des boutons, donc +1.
BorisOkunskiy

1
@incarnate en fait cette réponse n'applique pas le style à un champ de saisie mais à un span, alors que MartinTurjak propose une solution complète (et des alternatives supplémentaires) dans sa réponse ci-dessus .
BobbyZ

Je voulais vraiment dire des entrées de texte ici puisque le sujet indique «Comment ajouter une icône Font Awesome au champ de saisie?» - et ne mentionne rien sur les boutons. MartinTurjak décrit de bonnes façons de styliser les boutons, pas les champs de texte.
BorisOkunskiy
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.