除非字体粗细设置为 600，否则占位符中的字体真棒图标不会显示

Question

我从 Font Awesome 4.4 升级到 5，并从使用下载的文件转到 CDN。

字体工作正常，但在我的搜索字段输入占位符中使用图标时，它没有像我想要的那样显示：

input {
  font-family: Arial, 'Font Awesome 5 Free';
  font-weight: 500;
  color: #777;
  font-size: 18px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

This won't show<br>
<input placeholder=" Location"><br>

This one is showing<br>
<input placeholder=" Location" style="font-weight:600"><br>

我遇到的问题是它仅在搜索字段的字体粗细为 600 或更大时才会显示！如果我将字体粗细设置为 500，字体图标就会消失！

这个问题似乎与常规图标属于专业版的事实有关，我只能使用实心图标（如此处解释：）

有没有什么方法可以将图标用作占位符（因为我希望它在键入文本时消失）但不使文本变为粗体。图标可以是粗体，但文本不能。

这是您还可以看到结果的网站：

Answer 1

一个想法是将占位符创建为输入外部的元素，以便轻松隔离图标，然后您可以通过玩 focus 状态和一些 z-index 来模拟占位符效果。

input,
label span {
  font-family: Arial;
  font-weight: 500;
  color: #777;
  font-size: 18px;
}

label {
  position: relative;
}

label>span {
  position: absolute;
  top: 0;
  left: 5px;
  cursor: auto;
}

input {
  position: relative;
}

input:focus {
  z-index: 1;
}


/* Or 
input:focus + span {
  display:none;
}

*/

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

<label>
<input  style="font-weight:600">
<span><i class="fas fa-search"></i> Location</span>
</label>

Answer 2

我认为将字体图标和您用于输入的标准字体混合使用可能不是最好的方法。对于您的用例，我建议将图标与其余输入分开，如下所示：

<div class="input-wrap">
  <input type="text" placeholder="Location" />
  <i class="fas fa-map-marker-alt"></i>
</div>

我制作了一个 example here，其中也有一些示例 CSS。为了与您当前的实现相匹配，该图标也将隐藏在输入焦点上，但并非总是如此。

在 Bootstrap 中还有一种内置方法可以执行此操作，我可以看到您的示例站点正在使用该方法：

V4：https://getbootstrap.com/docs/4.1/components/input-group/

V3: https://getbootstrap.com/docs/3.3/components/#input-groups

除非字体粗细设置为 600，否则占位符中的字体真棒图标不会显示

Font awesome icon in placeholder not showing up unless font weight set to 600

css

font-awesome

font-awesome-5

fontawesome-4.4.0