javascript - 将 fontawesome 图标设置为占位符

Question

我尝试了这里找到的不同解决方案，但没有任何效果。我需要的是将 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;
}

关于“重复”的建议解决方案不起作用+我不想在我的项目中使用 Jquery

Answer 1

使用 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'>