twitter-bootstrap - 带有 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/>

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