升级字体真棒后未显示字体真棒“搜索”的 Unicode 字符答案

【问题标题】：Unicode characters for font awesome 'search' not showing up after upgrading Font Awesome升级字体真棒后未显示字体真棒“搜索”的 Unicode 字符
【发布时间】：2018-05-16 07:26:06
【问题描述】：

我使用的是 font awesomes 'search' 字体

<i class="fas fa-search"></i>

unicode 字符

f002

像这样在我的搜索字段占位符中

<input id="navbarSearchField" type="text" class="form-control searchInputsHeight" style="font-family:Arial, FontAwesome" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

在我从旧的 4.4 升级到 Font Awesome 5.0.13 之前它运行良好

看看 Font Awesome site unicode 字符还是一样的。

所以我想知道下载字体时是否遗漏了一些文件，或者我没有正确实现它？

【问题讨论】：

尝试使用font-family:Font Awesome 5 Free，它们在版本 5 中使用不同的字体系列名称
我尝试了“Font Awesome 5 Free”和“FontAwesome 5 Free”，但没有成功。你确定这是展示它的新方式吗？
您能否发布完整的 html 代码以及指向 fontawesome css 文件的链接。这会有所帮助

标签： html css fonts font-awesome-5 fontawesome-4.4.0

【解决方案1】：

<input id="navbarSearchField" class="fas" type="text" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

只需在输入中添加类fa 或fas：

<input id="navbarSearchField" class="fa" type="text" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

演示：http://jsfiddle.net/GCu2D/3601/

【讨论】：

看起来这行得通，但它改变了搜索字段内的字体。你知道它为什么会改变吗？我还使用了 'font-family:Arial, FontAwesome 5 Free;'
@user1186050 里面的字体发生了变化，因为 fa 类使用了 Font Awesome 字体系列。
有没有办法使用/设置我原来的字体系列？
您可以通过编写input::placeholder {font:900 1em 'Font Awesome 5 Free';} 单独更改占位符的字体，然后您无需更改输入本身的样式。见jsfiddle.net/MrLister/mopn054k/1
我收到一条错误消息，提示 ::placeholder 不是有效的 CSS 3.0 伪元素。此外，如果我运行您的示例并更改 fon-family，则图标消失

【解决方案2】：

我认为这是一个非常有趣的问题，我敢肯定这不是一个 100% 完美的解决方案，但我发现 this Github Issue，他们说，您还需要为 solid Font Awesome 设置 font-weight: 900图标。正如 cmets 中所述，font-family 也发生了一些变化。请看下面的sn-p，我不确定你是否可以“取消加粗”图标后面的文字。

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>

<input id="navbarSearchField" 
       type="text" 
       class="form-control searchInputsHeight" 
       style="font-family: Arial, Font Awesome\ 5 Free; font-weight: 900;" 
       placeholder="&#xf002 Location" 
       aria-describedby="navbarDate" 
/>

您似乎不需要使用 FA 的“常规”图标包设置特定的字体粗细，但不幸的是，这是您必须购买的 FA Pro 的一部分。

【讨论】：

仅供参考 - 在调试器窗口中，我看到一条穿过 style 属性的线，带有一个显示“无效属性值”的信息图标。不知道为什么，即使它显示了图标！
@user1186050 很奇怪，我没有看到这个（Chrome 66）。你使用的是什么浏览器？完整的样式属性是否被删除？
是的，我正在使用最新版本的 Chrome (66)
这很奇怪，但我无法重现
在我的电脑上（我假设所有 Arial 包含 F002 字形的电脑），这个 sn-p 显示 fi 而不是 FA 图标。不过，您对 900 的重量是正确的，因此可以通过仅给占位符提供字体来执行 OP 想要的操作。另见jsfiddle.net/MrLister/mopn054k/1

【解决方案3】：

我让它工作了。这就是我所做的。

<input id="navbarSearchField" type="text" class="form-control searchInputsHeight" style="font-family:Arial, 'Font Awesome 5 Free'; font-weight: 600; color: #777; font-size: 20px;" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

请注意字体系列“Font Awesome 5 Free”周围的单引号。如果我不使用单引号，它与使用的类 'fa' 一起使用，但使用了 Font Awesome 字体系列，现在它使用我的字体。 'Circular' 没有使用 fa 类。另外我必须添加 font-weight: 600 否则它不会出现！字体粗细在在线FA文档中有说明

【讨论】：