3

我正在使用 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网站，unicode 字符仍然相同。

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

4

3 回答 3

2 

<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/

于 2018-05-16T07:46:55.777 回答
2

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

<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 的一部分，您必须购买它。

于 2018-05-16T07:45:46.900 回答
0

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

<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文档中进行了解释

于 2018-05-16T09:15:28.180 回答