html - 同一输入中的两种字体

Question

我正在尝试设置搜索输入的样式，使其具有包含 FontAwesome 放大镜 fa-search [] 的占位符。 “搜索用户”一词需要使用 Gotham Light 字体，同时放大镜使用 FontAwesome 字体。

这是现在的截图。所有需要更正的是将衬线字体更改为我在页面其余部分指定的 Gotham Light 字体。

这是产生该结果的代码:

<div>
    <input type="text" class="fa fa-search input-search-user" placeholder="&#xf002; Search User">
</div>

这是使“搜索用户”文本以正确的 Gotham Light 字体显示的代码，但它也破坏了 FontAwesome 放大镜。

<div>
    <input type="text" class="input-search-user" placeholder="&#xf002; Search User">
</div>

这就是它的样子:

因此，如您所见，在同一输入中使用 FontAwesome 和另一种字体是“非此即彼”。有人告诉我应该让 div 模拟输入框并设置 div 的样式，但我很难弄清楚如何做到这一点。

有什么想法可以做到这一点吗？

Answer 1

您可以只添加一个跨度并将其移到文本字段上并缩进占位符文本，如下例所示:

HTML:

<div class="search">
  <span class="fa fa-search"></span>
 <input placeholder="Search user">
</div>

CSS:

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
}

.search input {
  width: 250px;
  height: 32px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search input { 
  text-indent: 32px;
}

.search .fa-search { 
  position: absolute;
  top: 10px;
  left: 10px;
}

http://codepen.io/williamjamesclark/pen/WrKJEV