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

Je suis en train d'utiliser Ember (version 1.7.1) et j'avais besoin à la fois de lier la valeur de l'entrée et d'avoir un espace réservé qui était une icône FontAwesome. Le seul moyen de lier la valeur dans Ember (que je connaisse) est d'utiliser l'assistant intégré. Mais cela fait que l'espace réservé soit échappé, "" apparaît juste comme ça, du texte.

Que vous utilisiez Ember ou non, vous devez définir le CSS de l'espace réservé de l'entrée pour avoir une police FontAwesome. Voici du SCSS (en utilisant Bourbon pour le style de l'espace réservé):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Si vous utilisez simplement Handlebars, comme cela a été mentionné précédemment, vous pouvez simplement définir l'entité HTML en tant qu'espace réservé:

Si vous utilisez Ember, liez l'espace réservé à une propriété du contrôleur ayant la valeur unicode.

dans le modèle:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

sur le contrôleur:

listFilter: null,
listFilterPlaceholder: "\uf002"

Et le liage de valeur fonctionne bien!

Answer 2

Utilisez placeholder="" dans votre input. Vous pouvez trouver unicode sur la page FontAwesome http://fontawesome.io/icons/. Mais assurez-vous d'ajouter style="font-family: FontAwesome;" dans votre input.

Answer 3

Je sais que cette question est très ancienne. Mais je n'ai pas vu de réponse simple comme j'avais l'habitude d'utiliser.

Il vous suffit d'ajouter la classe fas à l'entrée et de mettre un hexadécimal valide dans ce cas  pour le glyphe de Font-Awesome comme ici

Vous pouvez trouver le code unicode de chaque glyphe sur le site officiel ici.

C'est un exemple simple, vous n'avez pas besoin de CSS ou de JavaScript.

input {
  padding: 5px;
}

Answer 4

Toute personne se demandant comment implémenter Font Awesome 5 :

Ne spécifiez pas une famille de polices générale "Font Awesome 5", vous devez terminer spécifiquement avec la branche des icônes avec lesquelles vous travaillez. Ici, j'utilise la branche "Brands" par exemple.

Plus de détails Utiliser une icône Font Awesome (5) dans le texte de l'attribut de placeholder de input

Answer 5

Je fais cela en ajoutant la classe fa-placeholder à l'entrée de texte :

donc, en css il suffit d'ajouter ceci :

.fa-placholder { font-family: "FontAwesome"; }

Cela fonctionne bien pour moi.

Mettre à jour :

Pour changer la police pendant que l'utilisateur tape dans votre champ de texte, ajoutez simplement votre police après font awesome

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }