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


111

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>"

Réponses:


61

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.


4
FontAwesome affichera des caractères normaux pour tous les symboles non Unicode. Pour moi, insérer une entité Unicode ne fonctionne pas, mais coller le symbole fonctionne: placeholder = " Bonjour"
DanielKhan

Avec FontAwesome 5, utilisez la famille de polices: Font Awesome \ 5 Free; au lieu.
Andrew Schultz le

1
@AndrewSchultz, font-family: Font Awesome\ 5 Free;ne fonctionne pas. Je devais utiliser justefont-family: FontAwesome;
kanlukasz

En fait, vous pouvez appliquer différentes polices à l'entrée. Je l'ai fait sur une installation avec FA5 Pro dessus et appliqué font-family: 'Font Awesome 5 Pro', 'Montserrat';au champ de recherche et cela a fonctionné un charme.
Jeff W

230

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


8
où avez-vous obtenu de la &#xF002;valeur? Je veux dire comment tu vas de icon-searchà &#xF002?
Ігар Цімошка

2
Vous n'avez même pas besoin de l' id="iconified"ajout juste class="fa"et font awesome s'occupera du css pour vous.
Pedro Hoehl Carvalho

8
Je devais changer l'ordre de la police pour le faire fonctionner: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">. Sinon, un symbole contenant "fl" a été affiché.
Guillaume Renoult

4
@ ІгарЦімошка Les codes hexadécimaux sont tous affichés sur la feuille de triche fortawesome.github.io/Font-Awesome/cheatsheet
Liam George Betsworth


20

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 .


Cela fonctionne également pour FA5 Pro utilisantinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
ChrisB

10

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'



8

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!

exemple d'espace réservé

gif d'espace réservé


Ceci utilise Ember 1.7.1
RustyToms

Bel article pour ceux qui utilisent d'autres technologies Web.
L84 du

1
Merci beaucoup! me gratter la tête un peu. merci d'avoir détaillé la solution!
Moe Tsao


4

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"; }



3

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


3

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>


C'est la réponse à Font Awesome 5. Merci!
laviex

1

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');
    }
});

1

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

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;
}
  1. 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"...
  1. 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;
}
  1. 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


0

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>

0

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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.