fontawesome5和bootstrap4的图标占位符

Question

有人知道如何在bootstrap4输入中使用fontawesome5图标作为占位符吗？我已经看到了以前版本的几种解决方案，但似乎没有其他版本可与最新版本一起使用。这是我到目前为止所拥有的：

<input
  type="text"
  className="form-control"
  placeholder="&#xf002; Search"
  style={{
    fontFamily: 'FontAwesome, "Open Sans", Verdana, sans-serif',
    fontStyle: 'normal',
    fontWeight: 'normal',
    textDecoration: 'inherit'
  }}
/>

Answer 1

您无法添加图标和文本。您可以尝试这个。

<input
  type="text"
  class="form-control"
  placeholder="&#xf002;"
  style="
     fontFamily:FontAwesome;
     fontStyle: normal;
     fontWeight: normal;
     textDecoration: inherit;
  "
/>

Answer 2

input{
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <input type="text" placeholder="&#xF002;"/>

Answer 3

<input class="mainLoginInput" type="text" placeholder="&#61442;"/> <br/>

您应该在占位符中编写图标代码