0
votes

Les icônes géniales de police ne s'affichent pas dans HTML

J'ai un formulaire de contact en HTML, j'ai donné des icônes géniales de police pour les champs de saisie, l'OCE est ci-dessous:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrap-input100">
						<input class="input100" type="number" name="pass" placeholder="Mobile Number">
						<span class="focus-input100" data-placeholder="&#xf095;"></span>
					</div>

					<div class="wrap-input100">
						<input class="input100" type="text" name="question" placeholder="Your Query">
						<span class="focus-input100" data-placeholder="&#xf128;"></span>
					</div>

html css icons font-awesome

0 commentaires

3 Réponses :

0
votes

Vous n'avez pas besoin d'ajouter un Data-Placeholder code> lorsque vous travaillez avec Font-génial. Vous devriez plutôt utiliser les classes de Font-Awesome comme ci-dessous: xxx pré>

p>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrap-input100">
    <input class="input100" type="number" name="pass" placeholder="Mobile Number">
    <span class="focus-input100 fa fa-phone"></span>
</div>

<div class="wrap-input100">
    <input class="input100" type="text" name="question" placeholder="Your Query">
    <span class="focus-input100 fa fa-question"></span>
</div>

0 commentaires

1
votes

Pour utiliser des icônes impressionnantes de police, n'utilisez pas espace réservé aux données code>. Font génial est une police qui convertit des glyphes en icônes. Donc, votre code fixe serait:

p>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrap-input100">
  <input class="input100" type="number" name="pass" placeholder="Mobile Number">
  <span class="focus-input100 fa">&#xf095;</span>
</div>

<div class="wrap-input100">
  <input class="input100" type="text" name="question" placeholder="Your Query">
  <span class="focus-input100 fa">&#xf128;</span>
</div>

0 commentaires

1
votes

Utiliser de la police géniale dans l'espace réservé d'entrée, vous pouvez utiliser ce code.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

   <div class="wrap-input100">
						<input class="input100" type="number" name="pass" placeholder="&#xf095; Mobile Number ">
					</div>

					<div class="wrap-input100">
						<input class="input100" type="text" name="question" placeholder="&#xf128; Your Query" >
                    </div>

0 commentaires