输入占位符中的 FA 图标？

Question

正如我在文档中看到的，Font Awesome 有一种方法可以在输入占位符中放置一个图标，就像这样：

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

这是我得到的：

No matter what code I put after &#x, it always renders the same icon.

我正在使用 ReactJS 和 Reactstrap 库。有什么建议吗？非常感谢（对不起 4 我的英语）

Answer 1

这样不行，因为输入框的字体族使用的是英文字体。 Font 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;
}

输入占位符中的 FA 图标？

FA Icon in placeholder of an input?

reactjs

font-awesome

reactstrap