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

Posted 2023-03-06

技术标签:

【中文标题】为啥位置 fontawesome 图标不能与占位符一起使用？【英文标题】：Why location fontawesome icon not working with placeholder?为什么位置 fontawesome 图标不能与占位符一起使用？ 【发布时间】：2021-11-02 13:28:43 【问题描述】：

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

提前致谢 :-)

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

【问题讨论】：

我认为问题仅出在这个图标上，我尝试了其他图标并且它有效。它应该是哪个图标？你检查你使用的unicode是否属于4.7版本。例如，这个 &#xf14e; 工作正常 fontawesome.com/v4.7/icon/compass 对于地图制作者请参阅 fontawesome.com/v4.7/icon/map-marker ，它将是 &#xf041 。 【参考方案1】：

你可能在 4.7.0 版本中使用了错误的 unicode

尝试 https://fontawesome.com/v4.7/icon/map-marker 至极 &#xf041 ，如果用作伪元素，则 unicode 是 \f041。

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

【讨论】：

【参考方案2】：

您似乎已经为一个名为 map-marker-alt 的图标获取了 Fontawesome 代码，该图标存在于 Fontawesome 版本 5 中，但不是您正在加载的 Fontawesome 版本 4。

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

不管怎样，这个 sn-p 给出了一个位置标记，我认为是您在使用版本 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 图标不能与占位符一起使用？的主要内容，如果未能解决你的问题，请参考以下文章

使用 React 的输入占位符中的 FontAwesome 图标

在输入占位符文本中使用 Angular fontawesome 图标

在输入占位符文本中使用 Font Awesome (5) 图标

Wordpress 中的占位符图标联系表格 7

为啥我不能使用某些免费的 FontAwesome 图标？

占位符上的 Select2 字体真棒图标