Html 输入占位符中的字体图标不工作
我试图在输入占位符中使用字体很棒的图标 我试过了，但没用Html 输入占位符中的字体图标不工作,html,Html,我试图在输入占位符中使用字体很棒的图标 我试过了，但没用 <body> <input type="text" placeholder="" style="font-family:FontAwesome"/> </body> 这个怎么了？我在占位符中得到了一些奇怪的数字，而不是图标。你可以像那样添加字体很棒的图标 <input type="text" placeholder="" style="fo
<body>
<input type="text" placeholder="" style="font-family:FontAwesome"/>
</body>
这个怎么了？我在占位符中得到了一些奇怪的数字，而不是图标。你可以像那样添加字体很棒的图标
<input type="text" placeholder="" style="font-family:Arial, FontAwesome" />
当您尝试使用字体图标时，您也可以查看小提琴，但得到的是一些奇怪的字符，这可能是因为浏览器试图使用错误的字体呈现该图标。通过检查元素，然后进入“计算”选项卡（Chrome:右键单击->检查元素->计算），检查您的
输入的字体系列
是什么。如果它不是字体很棒，但您认为您设置了它，请尝试使用font-family:fontsawesome！重要的。这将覆盖任何可能输入的parrent字体系列设置。您也可以使用占位符外的图标，与HTML一起放置。以下是我的解决方案：
HTML
<i class="fas fa-search form__icon"></i>
<input type="text" name="search" class="form__input" placeholder=" Search">
这有点复杂，但也可以使用动画、旋转和翻转图标
检查我的代码笔：我在font awesome网站上测试了代码，它工作正常，请确认输入字段是否选择了字体，或者它是否被其他CSS覆盖。如果你能制作一把小提琴就更好了。不要直接使用字体：fontawesome添加ariel类型也可以使用pseudo classChk yur fontawesome文件是否包含？Chk view source@nagi已将此添加到标记中，请在您的浏览器Chk working not@nagLet us中打开此url。
CSS
.form__icon {
position: absolute;
pointer-events: none;
z-index: 2;
}
.form__input {
position: relative;
z-index: 3;
}
.form__input:placeholder-shown {
z-index: 1;
}