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

我遇到过很多使用 Font Awesome

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

<input style="font-family:FontAwesome !important" type="text" placeholder="&#xf167">

请记住不要使用通用的“Font Awesome 5”字体系列，您需要特别以您正在使用的图标分支结尾。我在这里工作的是“品牌”类别。

<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;
}

然后将此类添加到您的标签中。

<input class="useFontAwesomeFamily" type="text" placeholder="&#xf167;">