Utiliser L'icône Font Awesome (5) dans le texte placeholder d'entrée
J'ai trouvé de nombreuses façons de résoudre ce problème en utilisant Font Awesome < 5, mais je n'arrive pas à résoudre ce problème en utilisant Font Awesome 5.
C'est le nombre de ressources pointant vers l'ajout d'une icône de police impressionnante dans le texte placé.
<input style="font-family:FontAwesome !important" type="text" placeholder="">
2 réponses
N'oubliez pas de ne pas utiliser la 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, je travaille dans la catégorie des" marques".
<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="">
pour une solution plus sophistiquée, vous pouvez implémenter une classe qui fonctionne spécifiquement sur le texte de remplacement d'une classe comme celle-ci et ajouter cette classe à votre entrée. Utile si vous voulez une famille de polices différente sur vos valeurs d'entrée.
.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
font-family: "Font Awesome 5 Brands" !important;
}
et ensuite ajouter cette classe à votre étiquette.
<input class="useFontAwesomeFamily" type="text" placeholder="">
vous pouvez aussi la classe fas à l'entrée.
il suffit de garder à l'esprit que cette solution et toutes les solutions de changement de style font-awesome changera également le style de tout texte précédant ou suivant l'icône unicode.