Блог

Как я видел в документации, у Font Awesome есть способ поместить значок в заполнитель ввода, делая что-то вроде этого:

   <Input placeholder='amp;#xf002; Search' />
 

Это то, что я получаю:

Независимо от того, какой код я ставлю после amp;#x, он всегда отображает один и тот же значок.

Я работаю с ReactJS Reactstrap библиотекой and. Есть предложения? Большое спасибо (извините за 4 моих английских)

Вы не можете сделать это таким образом, потому что семейство шрифтов поля ввода использует английский шрифт. Шрифт Awesome использует собственный файл шрифта.

Одним из способов реализации этого было бы использование позиционированного <i> элемента:

 <div class="container">
  <label><b>Username</b></label>
  <input type="text" placeholder="Enter Username" name="uname" required>
  <i class="fa fa-user fa-lg"></i>
</div>
 

 .container {
  position: relative;
}
.container i {
  position: absolute;
  left: 15px;
  top: 40px;
  color: gray;
}