Utilisez l'icône Font Awesome dans l'attribut Placeholder

Question

Est-il possible d'utiliser une icône Font Awesome dans un Placeholder ? J'ai lu que le HTML n'est pas autorisé dans un Placeholder. Y a-t-il une solution de contournement ?

placeholder=""

Answer 1

Si vous utilisez FontAwesome 4.7 cela devrait suffire :

Une liste de codes hexadécimaux peut être trouvée dans le cheatsheet de Font Awesome. Cependant, dans la dernière version 5.0 de FontAwesome, cette méthode ne fonctionne pas (même si vous utilisez l'approche CSS combinée avec la mise à jour de font-family).

Answer 2

Vous ne pouvez pas ajouter une icône et du texte car vous ne pouvez pas appliquer une police différente à une partie d'un espace réservé, cependant, si vous êtes satisfait simplement d'une icône alors cela peut fonctionner. Les icônes FontAwesome ne sont que des caractères avec une police personnalisée (vous pouvez consulter la Feuille de triche FontAwesome pour le caractère Unicode échappé dans la règle content. Dans le code source moins, il se trouve dans variables.less. Le défi serait de changer de police lorsque l'entrée n'est pas vide. Combinez-le avec jQuery comme dans ceci.

Avec ce CSS :

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Et ce (simple) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

La transition entre les polices ne sera pas fluide, cependant.

Answer 3

J'ai résolu avec cette méthode:

En CSS, j'ai utilisé ce code pour la classe fontAwesome:

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

En HTML, j'ai ajouté la classe fontawesome et le code d'icône fontawesome à l'intérieur du placeholder:

Vous pouvez voir dans CodePen.

Answer 4

La réponse de @Elli peut fonctionner avec FontAwesome 5, mais cela nécessite d'utiliser le bon nom de police et d'utiliser le CSS spécifique pour la version souhaitée. Par exemple, en utilisant FA5 Free, je n'ai pas pu le faire fonctionner si j'incluais le all.css, mais cela fonctionnait bien si j'incluais le solid.css :

Pour FA5 Pro, le nom de la police est 'Font Awesome 5 Pro'

Answer 5

Lorsque pris en charge, vous pouvez utiliser le pseudo-sélecteur ::input-placeholder combiné avec ::before.

Consultez un exemple sur :

http://codepen.io/JonFabritius/pen/nHeJg

Je travaillais sur cela et je suis tombé sur cet article, à partir duquel j'ai modifié ces éléments :

http://davidwalsh.name/html5-placeholder-css