Question

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

我使用相应的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", "&#61442;");
});

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

我试图混合各种东西，最后放弃。请帮忙！

Jsfiddle examples

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

Answer 1

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

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

Answer 2

您可以尝试这样的事情：

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

JSFiddle

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

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

2 个答案: