为什么位置 fontawesome 图标不能与占位符一起使用？

Question

我在两个输入字段中使用相同的技术，在我的占位符中使用超赞字体图标。在搜索的情况下，它工作正常但在位置的情况下，它不起作用我尝试更改 CDN link 但它不起作用。你可以看下图更清楚。

提前致谢:-)

.placeholder-icons {
    font-family: fontawesome;
}

<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- bootstrap csss -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

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

    
    <!-- custom css -->
</head>
<body>
   <div class="row container">
                                        <div class="col-md-5 p-2">
                                            <input type="text" class="form-control placeholder-icons" id="skill_input"
                                                placeholder=" &#xf002; SearchSkills, Designations, Companies">
                                        </div>
                                        <div class="col-md-5 p-2">
                                            <input type="text" class="form-control placeholder-icons"
                                                placeholder=" &#xf3c5; Enter Locations">
                                        </div>
                                        <div class="col-md-2 p-2">
                                            
                                        </div>
                                    </div>
                                
</body>
</html>

Answer 1

您可能为 4.7.0 版本使用了错误的 unicode

try https://fontawesome.com/v4.7/icon/map-marker wich wich would be &#xf041 , unicode is \f041 if used as a pseudo element.

.placeholder-icons {
  font-family: fontawesome;
}

<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- bootstrap csss -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

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


  <!-- custom css -->
</head>

<body>
  <div class="row container">
    <div class="col-md-5 p-2">
      <input type="text" class="form-control placeholder-icons" id="skill_input" placeholder=" &#xf002; SearchSkills, Designations, Companies">
    </div>
    <div class="col-md-5 p-2">
      <input type="text" class="form-control placeholder-icons" placeholder=" &#xf041; Enter Locations">
    </div>
    <div class="col-md-2 p-2">

    </div>
  </div>

</body>

</html>

Answer 2

您似乎已经找到了名为 map-marker-alt 的图标的 Fontawesome 代码，它存在于 Fontawesome 版本 5 中，但不存在于您正在加载的 Fontawesome 版本 4 中。

代码 f041 在两个版本中都给出了地图标记，尽管它们在视觉上并不完全相同。

无论如何，这个片段给出了一个位置标记，我认为您在使用版本 4 时期望的类型：

.placeholder-icons {
    font-family: fontawesome;
}

<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- bootstrap csss -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

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

    
    <!-- custom css -->
</head>
<body>
   <div class="row container">
                                        <div class="col-md-5 p-2">
                                            <input type="text" class="form-control placeholder-icons" id="skill_input"
                                                placeholder=" &#xf002; SearchSkills, Designations, Companies">
                                        </div>
                                        <div class="col-md-5 p-2">
                                            <input type="text" class="form-control placeholder-icons"
                                                placeholder=" &#xf041; Enter Locations">
                                        </div>
                                        <div class="col-md-2 p-2">
                                            
                                        </div>
                                    </div>
                                
</body>
</html>

为什么位置 fontawesome 图标不能与占位符一起使用？

Why location fontawesome icon not working with placeholder?

html

css

twitter-bootstrap

bootstrap-4

font-awesome