иконки font awesome не отображаются в html - PullRequest
Новая
       31

иконки font awesome не отображаются в html

0 голосов
/ 17 июня 2020

У меня есть контактная форма в html, я дал отличные иконки шрифтов для полей ввода, oce ниже: 

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

но отличный шрифт, похоже, не работает, может кто-нибудь, пожалуйста, скажите мне, что здесь может быть не так

Ответы [ 3 ]

1 голос
/ 17 июня 2020

для использования значков с отличным шрифтом, не используйте data-placeholder. Font Awesome - это шрифт, преобразующий глифы в значки. Итак, ваш фиксированный код будет: 

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

Кроме того, в качестве небольшого примечания, большинство людей предпочитают использовать тег <i> для значков.

Надеюсь, это поможет!

1 голос
/ 17 июня 2020

Используйте font awesome в заполнителе ввода, вы можете использовать этот код. 

    input {
    font-family: FontAwesome;
}
<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 голосов
/ 17 июня 2020

Вам не нужно добавлять data-placeholder при работе с font-awesome. Вместо этого вы должны использовать классы font-awesome, как показано ниже: 

<span class="focus-input100 fa fa-phone"></span>
<span class="focus-input100 fa fa-question"></span>


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