同一输入中的两种字体

Question

我尝试设置搜索输入的样式，使其具有包含FontAwesome放大镜fa-search []的占位符。单词＆＃34; Search User＆＃34;需要采用Gotham Light字体，同时放大镜采用FontAwesome字体。

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

这是产生该结果的代码：

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

以下是使搜索用户＆＃34;文本以正确的Gotham Light字体显示，但也会破坏FontAwesome放大镜。

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

这就是它的样子：

所以，正如你所看到的，它是＆＃34;或/或＆＃34;使用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

Answer 2

仅使用输入字段无法执行此操作。 但你可以试试这个：

<div class="input">
   <input type="text" placeholder="Search User" />
   <i class="fa fa-search"></i>
</div>

这样做：

.input{
   position: relative;
}
.input input{
   font-family: FONTHERE;
}
.input i{
   position: absolute;
   top: 50%;
   left: 5px; //Just guessing
   transform: translate(-50%,-50%); //centerize it
}

Answer 3

我知道这有点旧，但是可以在同一输入中简单地显示Font Awesome图标和另一种字体的文本。 CSS中的字体堆栈以Font Awesome开头，然后是其后的其他字体。

OP的HTML占位符属性很好：

 <input type="text" "placeholder="&#xf002; Search User">

以下是输入的CSS：

font-family: 'Font Awesome', 'someWebFont', sans-serif;

这里很疯狂：https://autocamp.com/contact/