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

假设您的目标是将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 Awesome5。如果使用的是较旧的版本，则字体很可能仍为FontAwesome 。）}

Answer 2

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

Answer 3

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图标设置为占位符

3 个答案: