5

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

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

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

4 回答 4

10

请记住不要使用一般的“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;">
于 2018-04-27T05:56:38.910 回答
3

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

常规图标的分支是Font Awesome 5 Free。但是，如果您需要使用实心图标，只需添加font-weight: 900; 内联 CSS 的属性。

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

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

我希望它有所帮助。

于 2019-09-25T16:19:36.177 回答
1

您也可以将 fas 类添加到输入中。

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

于 2018-09-20T23:49:19.763 回答
0

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

于 2020-07-04T08:25:10.963 回答