Réponses:
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 content
rè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=""/>
</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.
font-family: Font Awesome\ 5 Free;
ne fonctionne pas. Je devais utiliser justefont-family: FontAwesome;
font-family: 'Font Awesome 5 Pro', 'Montserrat';
au champ de recherche et cela a fonctionné un charme.
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=" 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
).

valeur? Je veux dire comment tu vas de icon-search
à 
?
id="iconified"
ajout juste class="fa"
et font awesome s'occupera du css pour vous.
<input type="text" placeholder=" Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">
. Sinon, un symbole contenant "fl" a été affiché.
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=" insert email address ..." value="">
Vous pouvez voir dans CodePen .
input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
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=" 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-placeholder
pseudosé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:
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="" 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-placeholder
classe au texte d'entrée:
<input type="text" name="search" class="form-control" placeholder="" />
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="">
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 ::placeholder
un élément d'entrée.
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</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 fas
classe à l'entrée et de mettre un hexagone valide dans ce cas 
pour le glyphe de Font-Awesome comme ici<input type="text" class="fas" placeholder="" />
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="" />
</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');
}
});
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:
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;
}
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
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="" 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>