Vous pouvez utiliser une autre balise au lieu de input
et appliquer FontAwesome de la manière habituelle.
au lieu de votre input
type avec, image
vous 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 i
ou 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 :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 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="" />
Les glyphes peuvent être passés comme valeurs de l' value
attribut. 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:
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!
:before
et ne fonctionnera donc pas avec les balisesinput
ouimg
... mais il existe une solution simple - à savoir, utiliser FontAwesome comme police régulière ... au dessus. J'espère gagner le vote ;-)