html 中未显示字体真棒图标

Question

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

但是 awesome 字体似乎不起作用，谁能告诉我这里可能出了什么问题

Answer 1

使用 font-awesome 时不需要添加 data-placeholder。您应该改用如下所示的字体真棒类：

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

Answer 2

要使用超棒的字体图标，请不要使用 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> 标签。

希望对您有所帮助！

Answer 3

在输入占位符中使用很棒的字体，您可以使用此代码。

    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>

html 中未显示字体真棒图标

font awesome icons not displaying in html

html

css

icons

font-awesome