2

我从 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 在 CSS 中直接使用时显示方形而不是图标）

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

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

4

2 回答 2

1

一个想法是将占位符创建为输入之外的元素，以便轻松隔离图标，然后您可以通过玩focusstate 和 some来模拟占位符效果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>

于 2018-05-19T21:13:16.260 回答
1

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

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

我在这里做了一个例子，其中也有一些示例 CSS。为了匹配您当前的实现，该图标也将隐藏在输入焦点上，但这并不总是需要如此。

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

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

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

于 2018-05-19T21:33:49.907 回答