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

La solution de Teocci est aussi simple qu'elle puisse l'être, donc, pas besoin d'ajouter de CSS, il suffit d'ajouter la classe "fas" pour Font Awesome 5, car cela ajoute la déclaration CSS de police appropriée à l'élément.

Voici un exemple de boîte de recherche dans la barre de navigation Bootstrap, avec une icône de recherche ajoutée à la fois dans le groupe d'entrée et dans l'attribut de placeholder (pour la démonstration, bien sûr, personne ne les utiliserait en même temps). Image: https://i.imgur.com/v4kQJ77.png "> Code:

            Rechercher

Answer 2

Parfois, surtout lorsque aucune réponse ne fonctionne, vous pouvez utiliser l'astuce ci-dessous

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

Answer 3

.form-group {
  position: relative;
}
i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
input {
  padding-left: 1rem;
}