Question

我正在尝试在输入占位符中使用Font Awesome图标。

我尝试了这个但不行。

<body>
   <input type="text" placeholder="&#xF002;" style="font-family:FontAwesome"/>
</body>

这有什么问题？我在占位符中得到一些奇怪的数字而不是图标。

Answer 1

您可以添加字体真棒图标

<input type="text" placeholder="&#xF002" style="font-family:Arial, FontAwesome" />

您还可以查看小提琴Fiddle click here

Answer 2

当您尝试使用字体图标时，您获得的是一些奇怪的字符，这可能是因为浏览器尝试使用错误的字体呈现该图标。通过检查元素，检查您的input＆＃39; s font-family是什么，然后进入＆＃39; Computed＆＃39;标签（Chrome：右键单击 - ＆gt;检查元素 - ＆gt;已计算）。如果它不是font-awesome，但您认为已设置它，请尝试使用font-family: FontAwesome !important;。这将覆盖任何可能的输入parrent font-family设置。

Answer 3

您还可以在占位符之外使用HTML放置的图标。这是我的解决方案：

HTML
<i class="fas fa-search form__icon"></i>
<input type="text" name="search" class="form__input" placeholder="      Search">

CSS
.form__icon {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.form__input {
  position: relative;
  z-index: 3;
}
.form__input:placeholder-shown {
  z-index: 1;
}

这有点复杂，但是也可以使用动画，旋转和翻转图标。

检查我的CodePen：https://codepen.io/dzakh/pen/YzKqJvy

输入占位符中的Font Awesome图标不起作用

3 个答案: