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

Ignorer le jQuery, cela peut être fait en utilisant ::placeholder d'un élément d'entrée.

La partie css

input.name::placeholder{ font-family:fontAwesome; font-size:[taille nécessaire]; color:[couleur de l'espace réservé nécessaire] }

input.name{ font-family:[famille de polices que vous voulez spécifier] }

LA MEILLEURE PARTIE : Vous pouvez avoir une famille de police différente pour l'espace réservé et le texte

Answer 2

Si vous pouvez / voulez utiliser Bootstrap, la solution serait les groupes de saisie:

Ressemble à ceci:saisie avec préfixe de texte et symbole de recherche

Answer 3

J'ai résolu le problème un peu différemment et cela fonctionne avec n'importe quelle icône FA à travers le code html. Au lieu de toutes ces difficultés avec le placeholder, ma solution est :

1. Pour placer une icône de la manière habituelle

   HTML

   CSS .blockicon { position: absolute; margin: quelques-corrections; } .blockinput { padding: quelques-corrections; }

2. Ensuite, ajustez le texte de placeholder (c'est personnel pour tout le monde, dans mon cas une icône était juste avant le texte)

   HTML

   ...placeholder=" Du texte"...

3. Le problème est que l'icône est au-dessus de notre champ de texte et bloque le curseur pour cliquer, donc nous devons ajouter une autre ligne dans notre CSS

   CSS .block__icon { position: absolute; margin: quelques-corrections;

   / La nouvelle ligne / pointer-events: none; }

4. Mais l'icône ne disparaît pas en même temps que le placeholder, donc nous devons le corriger. Et aussi, c'est la version finale de ma solution :

   HTML

   CSS .blockicon { position: absolute; z-index: 2; / Nouvelle ligne / margin: quelques-corrections; } .blockinput { position: relative; / Nouvelle ligne / z-index: 2; / Nouvelle ligne / padding: quelques-corrections; } / Nouveau / .block__input:placeholder-shown { z-index: 1; }

C'est plus difficile que ce que je pensais, mais j'espère avoir aidé quelqu'un avec cela.

Codepen : https://codepen.io/dzakh/pen/YzKqJvy

Answer 4

Il y a un léger retard et un scintillement lorsque la police change dans la réponse fournie par Jason. Utiliser l'événement "change" au lieu de "keyup" résout ce problème.

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

Answer 5

J'ai ajouté à la fois du texte et une icône ensemble dans un espace réservé.

placeholder="Éditer   "

CSS :

font-family: FontAwesome,'Merriweather Sans', sans-serif;