Question

我使用Font Awesome＆lt;和/或5，但我似乎无法使用Font Awesome 5以任何方式解决这个问题。

这是有多少资源指向在占位符文本中添加Font Awesome图标。

Select

Answer 1

请记住不要使用通用＆＃34; Font Awesome 5＆＃34;字体系列，您需要特别以您正在使用的图标分支结束。我在这里工作＆＃34; Brands＆＃34;类别。

valet forget

对于更复杂的解决方案，您可以实现一个专门处理类这样的类的占位符文本的类，并将该类添加到您的输入中。如果您想在输入值上使用不同的font-family，则非常有用。

<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="&#xf167">

然后将此类添加到您的代码中。

.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
    font-family: "Font Awesome 5 Brands" !important;
}

Answer 2

您也可以将fas类输入。

请记住，此解决方案和任何字体超赞的样式更改解决方案也会更改unicode图标之前或之后的任何文本的样式。

Answer 3

这可能会帮助我那里遇到同样问题的人。

常规分支图标为 Font Awesome 5 Free 。但是，如果您需要使用实心图标，只需将 font-weight：900; 属性添加到嵌入式CSS。

<style="font-family: Circular, 'Font Awesome 5 Free' !important; font-weight: 900;>

占位符文本将为粗体，我仍在尝试寻找解决方案，我不知道是否还有其他方法，但目前对我有用。

希望对您有帮助。

Answer 4

记住要在输入中添加“ fas fa-search”类

在输入占位符文本中使用Font Awesome（5）图标

4 个答案: