Utiliser L'icône Font Awesome dans le conteneur
est-il possible d'utiliser L'icône Font Awesome dans un espace réservé? Je lis où HTML n'est pas autorisé dans un espace réservé. Est-il une solution?
placeholder="<i class='icon-search'></i>"
11 réponses
vous ne pouvez pas ajouter une icône et du texte parce que vous ne pouvez pas appliquer une police différente à une partie d'un paramètre, cependant, si vous êtes satisfait avec juste une icône alors il peut fonctionner. Les icônes de FontAwesome ne sont que 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 moins important, il se trouve dans les variables .moins Le défi serait d'échanger les polices lors de l'entrée n'est pas vide. Combinez-le avec jQuery comme ce .
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
avec cette 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 sans heurts.
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 se trouve dans le cheatsheet . 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 la mise à jour font-family ).
j'ai résolu avec cette méthode:
dans la CSS j'ai utilisé ce code pour la classe fontAwesome :
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}
dans le HTML j'ai ajouté le classe fontawesome et le code d'icône fontawesome à l'intérieur du paramètre:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
vous pouvez voir dans CodePen .
où supporté, vous pouvez utiliser le pseudoselecteur ::input-placeholder combiné avec ::before .
voir un exemple à:
http://codepen.io/JonFabritius/pen/nHeJg
j'étais juste en train de travailler là-dessus et je suis tombé sur cet article, d'où j'ai modifié ce truc:
j'utilise Ember (version 1.7.1) et j'ai dû à la fois lier la valeur de l'entrée et avoir un placeholder qui était une icône FontAwesome. La seule façon de lier la valeur de Braise (que je connais) est d'utiliser le construit en aide. Mais cela provoque l'échappée du conteneur," & #xF002 " apparaît juste comme ça, texte.
si vous utilisez Ember ou non, vous devez définir le CSS du paramètre d'entrée pour avoir une police-famille de FontAwesome. C'est SCSS (en utilisant Bourbon pour le style placeholder ):
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 le guidon, comme cela a été mentionné précédemment, vous pouvez simplement définir l'entité html comme le paramètre:
<input id="listFilter" placeholder="" type="text">
si vous utilisez Ember lient le placeholder à une propriété de controller 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 fixation de la valeur fonctionne très bien!
je fais ceci en ajoutant fa-placeholder classe au texte d'entrée:
<input type="text" name="search" class="form-control" placeholder="" />
donc, dans css Il suffit d'ajouter ceci:
.fa-placholder {
font-family: "FontAwesome"; }
ça marche bien pour moi.
mise à jour:
pour changer de police pendant que l'utilisateur tape dans votre entrée de texte, il suffit d'ajouter votre police après Font awesome
.fa-placholder {
font-family: "FontAwesome", "Source Sans Pro"; }
utilisez placeholder="" 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 entrée.
quiconque s'interroge sur une Font Awesome 5 mise en œuvre:
ne spécifiez pas une famille générale de polices" Font Awesome 5", vous devez vous arrêter spécifiquement avec la branche d'icônes avec laquelle vous travaillez. Ici, j'utilise les "marques" de la branche par exemple.
<input style="font-family:'Font Awesome 5 Brands' !important"
type="text" placeholder="">
plus de détails utilisez la police Awesome (5) icône dans le texte de remplacement d'entrée
il y a un léger retard et un léger écart 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');
}
});
en Ignorant le jQuery, cela peut être fait en utilisant le ::placeholder d'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 une famille de caractères différente pour le placeholder et le texte
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;