web-dev-qa-db-fra.com

Utiliser l'icône Police Awesome dans Placeholder

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

placeholder="<i class='icon-search'></i>"
placeholderfont-awesome
92
L84

Vous ne pouvez pas ajouter d'icône ni de texte car vous ne pouvez pas appliquer une police différente à une partie d'un espace réservé. Toutefois, si vous êtes satisfait d'une icône, cela peut fonctionner. Les icônes FontAwesome sont juste des caractères avec une police personnalisée (vous pouvez regarder le FontAwesome.css pour le caractère Unicode échappé dans la règle content. Dans le code source inférieur, il se trouve dans - variables.less Le défi consiste à permuter les polices lorsque l'entrée n'est pas vide. Combinez-le avec jQuery comme this .

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

47
Jason Sperske

Si vous utilisez FontAwesome 4.7 cela 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 des codes hexadécimaux se trouve dans le aide-mémoire Font Awesome . Cependant, dans la dernière version de FontAwesome 5.0, cette méthode ne fonctionne pas (même si vous utilisez l'approche CSS combinée avec le font-family mis à jour).

201
Elli

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 code 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 .

14
huckbit

Là où cela est supporté, vous pouvez utiliser le pseudosélecteur ::input-placeholder associé à ::before.

Voir un exemple à:

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

Je travaillais juste sur ceci et suis tombé sur cet article, à partir duquel j'ai modifié ceci:

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

8
Jon Fabritius

J'utilise Ember (version 1.7.1) et je devais à la fois lier la valeur de l'entrée et disposer d'un espace réservé qui était une icône FontAwesome. La seule façon de lier la valeur dans Ember (à ma connaissance) consiste à utiliser l'aide intégrée. Mais cela provoque l'échappement de l'espace réservé, "& # xF002" apparaît juste comme ça, text.

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 de FontAwesome. C'est 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 utilisez simplement un guidon, 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 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 la liaison de valeur fonctionne bien!

placeholder example

placeholder gif

7
RustyToms

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

5
Junkkung HangHeng

Si vous vous interrogez sur une implémentation de Font Awesome 5 :

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

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

Plus de détails Icône Font Awesome (5) dans le texte de l'espace réservé pour la saisie

4
Thomas Lindauer

Je fais cela en ajoutant fa-placeholder class au texte saisi:

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

alors, dans css, ajoutez simplement ceci:

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

Cela fonctionne bien pour moi.

Mise à jour:

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

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

4
user4913965

En ignorant jQuery, vous pouvez utiliser ::placeholder d'un é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 les espaces réservés et le texte.

3
Veey

Je sais que cette question est très ancienne. Mais je n'ai pas vu de réponse simple comme je le faisais auparavant.

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

Vous pouvez trouver l'unicode de chaque glyphe dans le site officiel ici .

Ceci est un exemple simple, vous n'avez pas besoin de css ou 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>
2
Teocci

Si vous pouvez/voulez utiliser Bootstrap, la solution serait groupe 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 text-prepend et symbole de recherche

1
Constantijn Baarendse

Il y a quelques légers retards et jank à mesure que 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');
    }
});
1
Neil VanLandingham

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

placeholder="Edit &nbsp; &#xf040;"

CSS:

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

La réponse de @ Elli peut fonctionner dans FontAwesome 5, mais elle nécessite l’utilisation du nom de police correct et du code CSS spécifique à la version de votre choix. 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 le fichier 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".

1
Richard

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

Voici un exemple de zone de recherche dans Bootstrap navbar, 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, personne ne les utilisera 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>
0
Mladen Janjic

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

  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;
}
  1. Puis 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"...
  1. Voici le problème qu'une icône est au-dessus de notre entrée et bloque le curseur pour que nous puissions cliquer, nous devrions donc ajouter une ligne supplémentaire dans notre CSS
CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}
  1. Mais une icône ne disparaît pas avec un espace réservé, nous devons donc la réparer. Et aussi ceci est 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é quelqu'un avec ça.

0
Dmitry Zakh