Utiliser l'icône Font Awesome dans l'espace réservé

Est-il possible d'utiliser Font Awesome Icon dans un espace réservé? J'ai lu où le HTML n'est pas autorisé dans un espace réservé. Y at-il un travail autour?

placeholder="<i class='icon-search'></i>"

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 d'une seule icône, cela peut fonctionner. Les icônes FontAwesome ne sont que des caractères avec une police personnalisée (vous pouvez consulter la feuille de calcul FontAwesome pour le caractère Unicode échappé dans la contentrègle. Dans le moins de code source que l'on trouve dans les variables.less Le défi serait d'échanger les polices lorsque l'entrée est pas vide. Combinez-le avec jQuery comme ceci .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

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 cependant pas fluide.

Si vous utilisez, FontAwesome 4.7cela devrait suffire:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

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

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

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

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

Dans le HTML, j'ai ajouté la classe fontawesome et le code de l'icône fontawesome à l'intérieur de l'espace réservé:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

Vous pouvez voir dans CodePen .

La réponse de @ Elli peut fonctionner dans FontAwesome 5, mais elle nécessite d'utiliser le nom de police correct et d'utiliser le CSS spécifique pour la version souhaitée. Par exemple, lors de l'utilisation de FA5 Free, je ne pouvais pas le faire fonctionner si j'incluais all.css, mais cela fonctionnait bien si j'incluais solid.css:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

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

Lorsqu'il est pris en charge, vous pouvez utiliser le ::input-placeholderpseudosélecteur combiné avec ::before.

Voir un exemple sur:

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

Je travaillais juste là-dessus et suis tombé sur cet article, à partir duquel j'ai modifié ce truc:

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

J'utilise 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. La seule façon de lier la valeur dans Ember (que je connaisse) est d'utiliser l'assistant intégré. Mais cela provoque l'échappement de l'espace réservé, "& # xF002" apparaît juste comme ça, du texte.

Si vous utilisez Ember ou non, vous devez définir le CSS de l'espace réservé de l'entrée pour avoir une famille de polices FontAwesome. Voici SCSS (en utilisant Bourbon pour le style d'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 n'utilisez que des guidons, comme cela a été mentionné précédemment, vous pouvez simplement définir l'entité html comme espace réservé:

<input id="listFilter" placeholder="&#xF002;" type="text">

Si vous utilisez Ember, liez l'espace réservé à une propriété de contrôleur qui a la valeur Unicode.

dans le modèle:

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

sur le contrôleur:

listFilter: null,
listFilterPlaceholder: "\uf002"

Et la liaison de valeur fonctionne très bien!

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

Je fais cela en ajoutant une fa-placeholderclasse au texte d'entrée:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

donc, en css, ajoutez simplement ceci:

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

Cela fonctionne bien pour moi.

Mettre à jour:

Pour changer la police pendant que l'utilisateur tape votre saisie de texte, ajoutez simplement votre police après la police géniale

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

Quiconque s'interroge sur une implémentation de Font Awesome 5 :

Ne spécifiez pas de famille de polices "Font Awesome 5", vous devez spécifiquement terminer par la branche d'icônes avec laquelle vous travaillez. Ici, j'utilise par exemple la branche "Marques".

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

Plus de détails Utiliser l'icône Font Awesome (5) dans le texte de l'espace réservé d'entrée

En ignorant jQuery, cela peut être fait en utilisant ::placeholderun élément d'entrée.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

La partie css

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

LA MEILLEURE PARTIE: Vous pouvez avoir différentes familles de polices pour l'espace réservé et le texte

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

Il vous suffit d'ajouter la fasclasse à l'entrée et de mettre un hexagone valide dans ce cas &#xf002pour le glyphe de Font-Awesome comme ici<input type="text" class="fas" placeholder="&#xf002" />

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

Ceci est un exemple simple, vous n'avez pas besoin de css ou de javascript.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

Il y a un léger retard et une secousse lorsque la police change dans la réponse fournie par Jason. L'utilisation de 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');
    }
});

J'ai ajouté le texte et l'icône ensemble dans un espace réservé.

placeholder="Edit   "

CSS:

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

Si vous pouvez / voulez utiliser Bootstrap, la solution serait des groupes d'entrée:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

Cela ressemble à ceci: entrée avec symbole de préfixe de texte et de recherche

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

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

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

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

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Voici le problème qu'une icône est au-dessus de notre entrée et bloque le curseur pour cliquer, nous devrions donc ajouter une ligne de plus dans notre CSS

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

  /* The new line */
  pointer-events: none;
}

4. Mais une icône ne disparaît pas avec l'espace réservé, nous devons donc le réparer. Et c'est aussi la version finale de ma solution:

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

C'est plus difficile que je ne le pensais auparavant, mais j'espère avoir aidé n'importe qui avec ça.

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

Teocci Solution est aussi simple que possible, donc pas besoin d'ajouter de CSS, ajoutez simplement class = "fas" pour Font Awesome 5, car il ajoute une déclaration de police CSS appropriée à l'élément.

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

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Parfois, répondez surtout à ne pas vous réveiller, lorsque vous pouvez utiliser le truc ci-dessous

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>