带输入占位符的Font Awesome5

Question

我想将FontAwesome图标添加到输入占位符。

所以我试着写这样的代码。

[HTML]

<input type="text" placeholder="&#xF167;"/>

[CSS]

font-family:'Font Awesome 5 Brands' !important

工作正常。 Youtube图标位于输入标记中。

但是当我将搜索图标（placeholder=""）添加到占位符时，它无法正常工作。

我的代码有什么问题？

字体真棒cheatsheet在这里 - ＆gt; https://fontawesome.com/cheatsheet

感谢。

Answer 1

如下设置font-family，同时根据您要加载的样式设置font-weight。对于Solid，font-weight将为900。

input {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Here's a working CodePen to demonstrate.

这确实要求您正确加载Font Awesome 5，它只能在Webfonts with CSS method中使用。在CodePen示例中，仅加载Font Awesome Free Solid。

Here's a reference显示与每个Font Awesome样式相关联的字体粗细。

Answer 2

Font Awesome 5将图标分成不同的系列。

有固体，品牌和常规。搜索图标是实心或常规字体。所以你需要使用font-family: Font Awesome 5 Free;

Answer 3

您可以使用以下命令加载所有fontawesome库：

href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384- 
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
crossorigin="anonymous">```