将 fontawesome 图标设置为占位符
set fontawesome icon to a placeholder
我尝试了在这里找到的不同解决方案,但没有任何效果。我需要的是将 fontawesome f14a 设置为一个字段
怎么了?
document.getElementById('property_charges').setAttribute('class', 'fontawesome-placeholder');
document.getElementById('property_charges').placeholder = '&#f14a';
和 css:
.fontawesome-placeholder {
//padding:10px;
//font-family: FontAwesome;
//z-index: 9999;
//z-index: 1;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
}
"duplicate" 上的建议解决方案不起作用 + 我不想在我的项目中使用 Jquery
假设您的目标是使用 Font Awesome 作为占位符并在用户输入值时恢复字体,那么您不需要 JavaScript。这可以通过使用 ::placeholder
仅使用 CSS 来完成。
(请注意,您缺少 "x":&#f14a --> 
)
#property_charges::placeholder {
font-family: "Font Awesome 5 Free";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<input id="property_charges" placeholder="">
(在我的示例中,我的字体名称必须是 "Font Awesome 5 Free"
,因为我使用的是 Font Awesome 5。如果您使用的是旧版本,您的字体可能会保留 FontAwesome
.)
使用JS/jQ和unicode时,必须在正斜杠后添加u
。不要使用 HTML 实体,除非您打算将其直接放入 HTML。还有一些必需的 CSS 样式。
document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<input id='fa' class='icon'>
document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<input id='fa' class='icon'>
我尝试了在这里找到的不同解决方案,但没有任何效果。我需要的是将 fontawesome f14a 设置为一个字段 怎么了?
document.getElementById('property_charges').setAttribute('class', 'fontawesome-placeholder');
document.getElementById('property_charges').placeholder = '&#f14a';
和 css:
.fontawesome-placeholder {
//padding:10px;
//font-family: FontAwesome;
//z-index: 9999;
//z-index: 1;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
}
"duplicate" 上的建议解决方案不起作用 + 我不想在我的项目中使用 Jquery
假设您的目标是使用 Font Awesome 作为占位符并在用户输入值时恢复字体,那么您不需要 JavaScript。这可以通过使用 ::placeholder
仅使用 CSS 来完成。
(请注意,您缺少 "x":&#f14a --> 
)
#property_charges::placeholder {
font-family: "Font Awesome 5 Free";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<input id="property_charges" placeholder="">
(在我的示例中,我的字体名称必须是 "Font Awesome 5 Free"
,因为我使用的是 Font Awesome 5。如果您使用的是旧版本,您的字体可能会保留 FontAwesome
.)
使用JS/jQ和unicode时,必须在正斜杠后添加u
。不要使用 HTML 实体,除非您打算将其直接放入 HTML。还有一些必需的 CSS 样式。
document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<input id='fa' class='icon'>
document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<input id='fa' class='icon'>