添加 class 和 jquery 后，Font awesome 图标字体作为输入中的占位符

Question

我正在尝试使用超棒的字体图标作为搜索输入字段中的占位符。

我使用相应的 html 实体作为占位符，然后使用伪 class 为占位符设置正确字体系列的样式（jsfiddle 中的示例 2）：

HTML:

<div class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</div>

CSS:

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon {
    padding:5px;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}
input.icon::-moz-placeholder {
    font-family:'FontAwesome';
}
input.icon::-ms-input-placeholder {
    font-family:'FontAwesome';
}

它按预期工作。

当我尝试通过 jquery 添加输入 class 和占位符时出现问题（jsfiddle 中的示例 1）：

JS:

$(document).ready(function() {
$('.wrapper input:first').addClass('icon');
$('.wrapper input:first').attr("placeholder", "&#61442;");
});

它不会将字体系列应用到输入占位符，而是只显示实体文本。

我试着把事情混在一起，最后放弃了。请帮忙！

Jsfiddle examples

P.S.: 在 css 中添加带有字体 content 的 :before 到输入包装器的方法不适用于我的特定情况。

Answer 1

您可以尝试这样的操作：

$('.wrapper input:first').attr("placeholder", $('<textarea />').html("&#61442;").html());

JSFiddle

这通过将值作为 HTML 而不是文本传递来实现，这可以通过创建对实际上并不存在的元素的引用来实现。

Answer 2

您应该先解析散列。您可以使用 $.parseHTML:

$('.wrapper input:first').attr("placeholder", $.parseHTML("&#61442;")[0].data);

添加 class 和 jquery 后，Font awesome 图标字体作为输入中的占位符

Font awesome icon font as a placeholder in input after adding class with jquery

jquery

css

input

font-awesome

placeholder