输入占位符中的字体真棒图标不起作用答案

【问题标题】：Font Awesome icon in input placeholder not working输入占位符中的字体真棒图标不起作用
【发布时间】：2016-01-16 05:32:36
【问题描述】：

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

我试过了，但没有用。

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

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

【问题讨论】：

我在 font-awesome 网站上测试了代码，它工作正常，请您确认字体是被输入字段选择还是被其他一些 CSS 覆盖。如果你能制作一个小提琴就更好了。
不要直接使用 font:fontawesome 添加 ariel 类型

标签： html

【解决方案1】：

您还可以使用占位符之外的图标，与 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

【讨论】：

【解决方案2】：

当您尝试使用字体图标时，您得到的是一些奇怪的字符，这可能是由于浏览器尝试使用错误的字体呈现该图标。检查您的input 的font-family 在通过检查元素呈现时是什么，然后进入“计算”选项卡（Chrome：右键单击-> 检查元素-> 计算）。如果它不是字体真棒，但您认为您设置了它，请尝试使用font-family: FontAwesome !important;。这将覆盖任何可能输入的父 font-family 设置。

【讨论】：

【解决方案3】：

你可以像这样添加字体真棒图标

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

你也可以看看小提琴Fiddle click here

【讨论】：

你也可以使用伪类
Chk yur fontawesome 文件是否包含在内？ chk查看源码@nag
我在标签中添加了这个，maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/…">
在你的浏览器中打开这个网址 chk 工作与否@nag
让我们continue this discussion in chat.