作者:冭獭1314 | 来源:互联网 | 2023-02-02 20:50
我想改变尝试attr()
使用它的占位符属性:
$(this).attr("placeholder", " Mandatory field");
但结果不是Font-Awesome图标,它看起来像这样:
" Mandatory field"
不过,如果我放
用CSS
.mandatory_field {
font-family: FontAwesome,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
它有效,但我需要知道如何使用jQuery动态获取这些结果.
提前致谢.
1> zer00ne..:
此解决方案仅需要:
一行jQuery
CSS属性 font-family:FontAwesome
根本没有HTML
您需要具有前缀的图标的特定CSS代码\u
.Font-Awesome文档只有class和unicode.幸运的是,这个网站有你需要的东西.这是jQuery应该是什么:
$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');
CSS和Javascript字体实体之间的唯一区别在于Javascript u
的第二个字符位置.
在演示中,我还添加了一些带有::placeholder
伪元素的样式作为奖励.您可以在不影响用户输入样式的情况下设置占位符样式.
演示
$('.mandatory_field').attr('placeholder', '\uf0a4 Mandatory field');
/* With the exception of font-family:FontAwesome everything
|| is optional.
*/
input {
font: inherit
}
.mandatory_field::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
.mandatory_field::-moz-placeholder {
/* Firefox 19+ */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}
.mandatory_field:-ms-input-placeholder {
/* IE 10+ */
color: red;
font-family: FontAwesome;
font-variant: small-caps;
}