同一输入中的两种字体答案

【问题标题】：Two fonts in the same input同一输入中的两种字体
【发布时间】：2016-05-11 10:51:44
【问题描述】：

我正在尝试设置搜索输入的样式，使其具有包含 FontAwesome 放大镜 fa-search [&#xf002;] 的占位符。 “Search User”字样需要使用 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 的样式，但我很难弄清楚如何做到这一点。

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

【问题讨论】：

我不相信这是可能的。我建议你找一个漂亮的字体！

标签： html css fonts

【解决方案1】：

我知道这有点旧，但可以在同一输入中简单地显示 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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

您还可以添加.search input:focus ~ span { display: none; } 和.search input:focus { text-indent: 10px; } 使其在键入时更像占位符。好答案！

【解决方案3】：

仅使用输入字段是不可能的。但你可以试试这个：

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

【讨论】：