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

【问题标题】：Font awesome icon in placeholder not showing up unless font weight set to 600除非字体粗细设置为 600，否则占位符中的字体真棒图标不会显示
【发布时间】：2018-10-29 22:41:24
【问题描述】：

我从 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，字体图标就会消失！

这个问题似乎与常规图标属于 PRO 版本的事实有关，我只能使用实体图标（如这里解释：Font Awesome shows square instead of icon when used directly in CSS）

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

这里是你也可以看到结果的网站：

【问题讨论】：

是的，如果这个图标的普通版不是免费的
副本会给出解释，你可以在这里验证：fontawesome.com/icons/search?style=solid
如果这是真的，有没有办法让“搜索”图标保持粗体，但让搜索字段占位符“位置”的其他部分成为常规重量？
在这种情况下让它在输入之外然后使用 CSS 让它在那里，我没有看到其他方式
他们是否用较新的版本改变了这一点？我的 4.4 版没有这个问题？

标签： css font-awesome font-awesome-5 fontawesome-4.4.0

【解决方案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>

【讨论】：

【解决方案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

【讨论】：