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

Question

我正在尝试使用font-awesome图标作为搜索输入字段中的占位符.

Jsfiddle的例子

我使用相应的html实体作为占位符,然后使用伪类来设置占位符和正确的font-family(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", "");
});

它不会将font-family应用于输入占位符,而只是显示实体文本.

我试图混合各种东西,最后放弃.请帮忙!

Jsfiddle的例子

PS:在css 中添加:before字体content到输入包装器的路由对我的特定情况不起作用.

Answer 1

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

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