Question

我在我的网站中使用（优秀的）Font-Awesome，如果我以这种方式使用它，它工作正常：

<i class="icon-home"></i>

但是（出于某些原因）我想以Unicode方式使用它，例如：

<i>&#xf015;</i>

（Font Awesome's cheatsheet）

但它不起作用 - 浏览器显示正方形。

我该如何解决这个问题？ CSS路径是正确的（作为使用Font Awesome工作的第一种方式）。

编辑：我确实安装了FontAwesome.otf。

Answer 1

它不起作用，因为只是要求浏览器使用斜体字体显示专用代码点U + F015。 Font Awesome CSS代码没有任何会影响这一点。如果您将class=icon-home添加到标记中，您将获得FontAwesome字体中分配给U + F015的字形，但由于Font Awesome技巧的工作方式，您将获得两次。

要仅获取一次字形，您需要使用CSS，要求使用FontAwesome字体而不触发通过生成的内容添加字形的规则。一个简单的技巧是使用以icon-开头的类名，但不匹配Font Awesome中的任何预定义名称或CSS或JavaScript代码中使用的任何名称。如，

<i class=icon-foo>&#xf015;</i>

或者，使用在font-family: FontAwesome元素上设置font-style: normal和i的CSS代码。

PS。请注意，根据定义，私有使用代码点（例如U + F015）没有可互操作的含义。因此，当样式表被禁用时，将不会显示为任何字符;浏览器将使用其传递未定义数据的方式，例如可能包含代码点编号的小方框。

Answer 2

您必须使用fa类：

<i class="fa">
   &#xf000;
</i>

<i class="fa fa-2x">
   &#xf000;
</i>

Answer 3

我遇到了一个使用unicode和fontawesome的类似问题。当我写的时候：

// keysForAutoComplete: [String?]
let tempFilteredResult = keysForAutoComplete.filter { ($0?.contains("abc"))! }

在Google Chrome浏览器中，显示正方形而不是图标。新版本的Font Awesome还需要

font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */

这对我有用。

来自：https://github.com/FortAwesome/Font-Awesome/issues/11946

希望这会有所帮助。

Answer 4

对于可能偶然发现此帖子的人，您需要设置

font-family: FontAwesome;

作为CSS选择器中的属性，然后unicode在CSS中可以正常工作

Answer 5

我发现，在Font-Awesome版本5（免费）中，您添加了： “ font-family：Font Awesome \ 5 Free; ”才可以正常工作。

这对我有用：）

我希望有人觉得这有帮助

Answer 6

在this page上阅读了 davidhund 的答案之后，我想出了一个解决方案，即你的网络字体没有正确加载，这是我错误的路径问题。

以下是他所说的：

我的第一个猜测是你包含了一个FontAwesome webfont 不同的（子）域。因此，请确保设置正确的标头那些webfont文件：“你需要添加 Access-Control-Allow-Origin标头，将您的域列入白名单拉动资产。“ https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

还要查看font-gotchas：）

希望我很清楚并帮助你：）

在同一页面上， f135ta 说：

...我通过上传文件“fontawesome-webfont.ttf”解决了这个问题到我的网络服务器并像普通字体一样安装..我不知道是否无论如何它是使用它的预先要求的一部分，但它对我有用; -

Answer 7

您还可以将FontAwesome图标与CSS3伪选择器一起使用，如下所示。

确保将font-family设置为FontAwesome，如下所示：

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

要完成上述工作，您必须执行以下操作：

在此处下载FontAwesome css库FontAwesome v4.7.0
从zip文件中提取并包含到您的应用根文件夹中，这两个文件夹如下所示：
仅引用应用的<head></head>部分中的css文件夹，如下所示：

Answer 8

我发现这很有用

content: "\f2d7" !important;
font-family: FontAwesome !important;

如果没有对我这么重要，它似乎没有用。

以下是有关如何使用Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be

更改社交图标的教程

Answer 9

请务必先加载FontAwesome样式。

font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";

您可以在此处找到FontAwesome的说明： https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Answer 10

在最新的5.13版本中有所不同。你总是喜欢...

font-family: "Font Awesome 5 Free";
content: "\f107";

但是现在有所不同...而不是使用font-weight：500;您正在关注：

font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";

那是为什么？我通过在.fas类中查找来弄清楚，因此您可以通过查看.fas类来找出更新的方法，这样您就可以做得与以前一样。找出是否有字体粗细和字体家族。你们来了这是5.13的更新答案。

Answer 11

对于那些使用Font Awesome 4.7版的人，

css_selector::before{
content:"\f006";
font-family:"fontawesome";
font-weight:900;
}

Answer 12

只是添加上面的Jukka K. Korpela答案，字体很棒已经定义了一个css选择器“fa”。你可以简单地做。这里的问题是，fa定义了font-style：normal，如果你需要斜体，你可以覆盖

Answer 13

请记住，您可能还需要包括一个版本号，因为您可能会使用以下任一版本：

font-family: 'Font Awesome 5 Pro';

或

font-family: 'Font Awesome 5 Free';

Answer 14

我知道您可以选择三种不同的字体系列，每种字体都有其自己的权重元素，需要加以应用：

第一

font-family: 'Font Awesome 5 Brands'; content: "\f373";

第二

font-family: 'Font Awesome 5 Free'; content: "\f061"; font-weight: 900;

第三

font-family: 'Font Awesome 5 Pro';

此处参考-https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

希望这会有所帮助。

Answer 15

通过使用CSS，您可以通过Unicode添加图标

content: '\f144';
font-family: FontAwesome;

这将起作用

Answer 16

添加字体粗细 900..它对我有用

font-weight: 900;

字体真棒＆amp;统一

16 个答案: