Два шрифта в одном и том же вводе

Question

Я пытаюсь создать ввод поиска, чтобы он имел местозаполнитель, который включает в себя FontAwesome увеличительное стекло fa-search []. Слова «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, но и ломает FontAvesome увеличительное стекло.

<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

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 
}