将 fontawesome 图标设置为占位符

Posted 2023-03-05

【中文标题】将 fontawesome 图标设置为占位符

【英文标题】：set fontawesome icon to a placeholder

【发布时间】：2019-09-08 20:28:21

【问题描述】：

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

【问题讨论】：

Use Font Awesome Icon in Placeholder的可能重复

“建议的解决方案不起作用” - 哪一个？您现在提到了一个可能的重复项，并且已经有两个答案……现在我们应该知道您的意思是什么？请更具体一点。如果答案不符合您的要求，请直接在其下方发表评论。

【参考方案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'>

【讨论】：

很好，谢谢！无论如何，你在使用 symfony/webpack-encore 吗？因为它打破了“默认样式”

不客气，除了演示中的内容外，不要不使用任何东西。尝试删除 .icon 类中的样式，font-family: "Font Awesome 5 Free" 除外。这也是 FA5 确保您使用的是正确的版本。如果您使用的是 FA4，将 font-family 更改为 FontAwesome 仍然可以工作。

获取信息：当我使用 setAttribute('class', 'blabla') 时，我正在删除 Symfony 字段中使用的默认类，请改用 .classList.add('new-class')

【参考方案2】：

假设您的目标是使用 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。）支持>}

【参考方案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'>