我在我的网站中使用（优秀的）Font-Awesome，如果我这样使用它，它工作正常：
<i class="icon-home"></i>
但是（出于某些原因）我想以 Unicode 方式使用它，例如：
<i></i>
但它不起作用 - 浏览器显示一个正方形。
我该如何解决这个问题？CSS 路径是正确的（作为使用 Font Awesome 的第一种方式）。
编辑：我确实安装了 FontAwesome.otf。
问问题
179197 次
16 回答
77
我使用 unicode 和 fontawesome 遇到了一个类似的问题。当我写道：
font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */
在谷歌浏览器上，会出现一个正方形而不是图标。新版 Font Awesome 还需要
font-weight: 900;
这对我有用。
来自：https ://github.com/FortAwesome/Font-Awesome/issues/11946
希望这会有所帮助。
于 2018-08-25T14:54:14.567 回答
66
它不起作用，因为<i></i>只是要求浏览器使用斜体字体显示 Private Use 代码点 U+F015。Font Awesome CSS 代码没有任何影响这一点。如果添加class=icon-home到标签中，您将获得分配给 FontAwesome 字体中 U+F015 的字形，但由于 Font Awesome 诡计的工作方式，您将获得两次。
要只获取一次字形，您需要使用要求使用 FontAwesome 字体的 CSS，而不触发通过生成的内容添加字形的规则。一个简单的技巧是使用以 Font Awesome 中的任何预定义名称或 CSS 或 JavaScript 代码中使用的任何名称开头icon-但不匹配的类名称。例如，
<i class=icon-foo></i>
font-family: FontAwesome或者，使用设置元素font-style: normal的CSS 代码。i
PS。请注意，根据定义，诸如 U+F015 之类的私有使用代码点没有可互操作的含义。因此，当样式表被禁用时，不会显示为任何字符；浏览器将使用它的方式来传达未定义数据的存在，例如一个可能包含代码点编号的小盒子。
于 2013-06-23T01:37:56.547 回答
42
您必须使用fa该类：
<i class="fa">

</i>
<i class="fa fa-2x">

</i>
于 2014-03-23T23:38:35.340 回答
25
对于那些可能偶然发现这篇文章的人，您需要设置
font-family: FontAwesome;
作为 CSS 选择器中的一个属性，然后 unicode 将在 CSS 中正常工作
于 2016-03-31T15:34:16.357 回答
8
我发现在 Font-Awesome 版本 5（免费）中，您添加了：“ font-family: Font Awesome\ 5 Free; ”只有这样它似乎才能正常工作。
这对我有用:)
我希望有些人觉得这有帮助
于 2018-08-24T15:48:33.520 回答
4
我知道您可以选择三种不同的字体系列，每种字体系列都有自己需要应用的权重元素：
第一的
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
希望这可以帮助。
于 2019-06-19T03:53:00.737 回答
4
请务必先加载 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
于 2018-11-21T14:40:21.650 回答
2
我发现这行得通
content: "\f2d7" !important;
font-family: FontAwesome !important;
没有 !important 对我来说似乎不起作用。
这是有关如何使用 Unicode 更改社交图标的教程https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be
于 2018-04-29T17:45:55.870 回答
2
In latest 5.13 there's a difference. You do like always...
font-family: "Font Awesome 5 Free";
content: "\f107";
But there's a difference now... Instead of use font-weight: 500; You are following this:
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";
Why is that? I figure out by finding in in .fas class, so you can figure out an updated way by looking into .fas class so you're doing the same as it has to be. Figure out if there's a font-weight and font-family. Here you go guys. That's an update answer for 5.13.
于 2020-05-27T17:19:02.993 回答
2
请记住，您可能还需要包含版本号，因为您可能会使用以下任何一种：
font-family: 'Font Awesome 5 Pro';
或者
font-family: 'Font Awesome 5 Free';
于 2019-04-23T22:11:10.813 回答
1
在阅读了此页面上davidhund的答案后，我想出了一个解决方案，即您的网络字体未正确加载，我是路径错误的问题。
这是他说的：
我的第一个猜测是您包含来自不同（子）域的 FontAwesome 网络字体。因此，请确保在这些 webfont 文件上设置正确的标题：“您需要添加 Access-Control-Allow-Origin 标题，将您从中提取资产的域列入白名单。” https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86
还要看看字体陷阱:)
希望我清楚并帮助你:)
在同一页面上，f135ta说：
...我通过将文件“fontawesome-webfont.ttf”上传到我的网络服务器并像常规字体一样安装它来解决这个问题。我不知道它是否是使用它的先决条件的一部分，但它适用于我 ;-
于 2013-06-22T19:23:10.583 回答
1
您还可以将 FontAwesome 图标与 CSS3 伪选择器一起使用，如下所示。
确保将 font-family 设置为 FontAwesome，如下所示：
table.dataTable thead th.sorting:after {font-family: FontAwesome;}
要使上述工作正常进行，您必须执行以下操作：
- 在此处下载 FontAwesome css 库FontAwesome v4.7.0
- 从 zip 文件中提取并包含到您的应用程序根文件夹中，两个文件夹如下所示：
- 仅引用
<head></head>应用程序部分中的 css 文件夹，如下所示：
于 2018-03-14T05:41:11.250 回答
1
对于那些使用 Font Awesome 4.7 版的人，
css_selector::before{
content:"\f006";
font-family:"fontawesome";
font-weight:900;
}
于 2020-09-28T12:21:19.743 回答
0
只是添加上面的 Jukka K. Korpela 答案，字体真棒已经定义了一个 css 选择器“fa”。你可以简单地做<i class="fa"></i>。这里要注意的是，fa 定义了 font-style:normal，如果你需要斜体，你可以覆盖喜欢<i class="fa" style="font-style:italic"></i>
于 2014-01-16T05:15:58.260 回答
0
通过使用 css，您可以通过 Unicode 添加您的图标
content: '\f144';
font-family: FontAwesome;
这将起作用
于 2020-07-11T17:16:52.887 回答
0
添加字体粗细 900 ..它对我有用
font-weight: 900;
于 2020-12-23T10:18:17.783 回答