将 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="&#xf14a;">

(在我的示例中,我的字体名称必须是 "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'>