使用 jquery 添加类后，字体很棒的图标字体作为输入中的占位符

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

Jsfiddle 示例 http://jsfiddle.net/gA4rx/831/

我使用相应的 html 实体作为占位符，然后使用伪类使用正确的字体系列设置占位符的样式（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 添加输入类和占位符时，问题就开始了（jsfiddle 中的示例 1）：

JS:

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

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

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

Jsfiddle 示例 http://jsfiddle.net/gA4rx/831/

附： 添加路线:before带字体content在 css 中输入包装器不适用于我的特定情况。

您应该首先解析哈希值。您可以使用$.parseHTML:

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