在输入的占位符文本中使用Font Awesome(5)图标 [英] Use Font Awesome (5) icon in input placeholder text

问题描述

我遇到了许多使用Font Awesome<来解决此问题的方法. 5，但我似乎无法使用Font Awesome 5以任何方式解决此问题.

I've come across many ways to solve this using Font Awesome < 5, but I can't seem to solve this in any way using Font Awesome 5.

这是在占位符文本中添加真棒字体"图标的资源.

This is how many resources point to adding a Font Awesome icon in placeholder text.

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

推荐答案

请记住不要使用常规的"Font Awesome 5"字体家族，您需要专门以正在使用的图标分支结尾.在这里，我正在研究品牌"类别.

Remember to not use the general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here i am working the "Brands" category.

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

对于更复杂的解决方案，您可以实现一个类，该类专门用于此类的占位符文本，并将该类添加到您的输入中.如果要在输入值上使用其他字体系列，则很有用.

For a more sophisticated solution you could implement a class that works specifically on the placeholder text of a class like this and add that class to you input. Useful if you want a different font-family on your input values.

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

然后将此类添加到标签中.

And then add this class to your tag.

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

这篇关于在输入的占位符文本中使用Font Awesome(5)图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！