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

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

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

以下是您可以查看结果的网站：

Answer 1

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

＆＃13;

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;
}

*/

＆＃13;

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

＆＃13;

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，否则占位符中的字体真棒图标不会显示

2 个答案: