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

Question

我遇到了很多使用Font Awesome <5解决此问题的方法，但是我似乎无法使用Font Awesome 5解决任何问题。

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

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

Answer 1

请记住，不要使用常规的“ 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;">