在输入占位符文本中使用 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" 字体系列，您需要专门以您正在使用的图标分支结尾。我在这里工作 "Brands" 类别。

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

对于更复杂的解决方案，您可以实现一个 class 专门用于 class 的占位符文本，并将 class 添加到您的输入中。如果你想在你的输入值上使用不同的字体系列，这很有用。

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

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

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

Answer 2

您也可以将class 快速输入。

请记住，此解决方案和任何超棒的字体样式更改解决方案也会更改 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

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

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

Use Font Awesome (5) icon in input placeholder text

input

placeholder

font-awesome

font-awesome-5