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

Posted

技术标签:

【中文标题】在输入占位符文本中使用 Font Awesome (5) 图标【英文标题】:Use Font Awesome (5) icon in input placeholder text 【发布时间】:2018-10-07 17:35:54 【问题描述】:

我遇到了很多使用 Font Awesome

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

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

【问题讨论】:

【参考方案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;">

【讨论】:

【参考方案2】:

这可能会对我遇到同样问题的人有所帮助。

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

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

占位符文本将是粗体,我仍在努力寻找解决方案,我不知道是否有其他方法,但它现在对我有用。

希望对你有帮助。

【讨论】:

【参考方案3】:

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

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

【讨论】:

请附上例子 @saAction &lt;input class="fas fa-search" type="text" name="search" placeholder="&amp;#xf002; Search..."&gt;【参考方案4】:

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

【讨论】:

以上是关于在输入占位符文本中使用 Font Awesome (5) 图标的主要内容,如果未能解决你的问题,请参考以下文章

如何在输入占位符中为主文本和子文本应用不同的样式?

如何在输入中仅使用占位符斜体

使用某些字体系列时,对于 Firefox 上的输入类型号,占位符完全不可见

在使用某些字体系列时,firefox上的输入类型编号完全不可见占位符

在输入占位符文本中使用 Angular fontawesome 图标

文本输入元素内的 Font Awesome 图标