字体真棒和Unicode

Question

我在我的网站中使用(优秀的)Font-Awesome,如果我以这种方式使用它,它工作正常:

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

但是(出于某些原因)我想以Unicode方式使用它,例如:

<i>&#xf015;</i>

(Font Awesome的备忘单)

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

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

编辑:我确实安装了FontAwesome.otf.

Answer 1

它不起作用,因为<i>&#xf015;</i>只是要求浏览器使用斜体字体显示专用代码点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

我使用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

希望这会有所帮助.

Answer 3

你必须使用这个fa类:

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

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

Answer 4

对于那些可能偶然发现这篇文章的人,你需要设置

font-family: FontAwesome; 

作为CSS选择器中的属性,然后unicode将在CSS中正常工作

Answer 5

我发现在Font-Awesome版本5（免费）中，您添加了：“ font-family：Font Awesome \ 5 Free; ”只有这样，它似乎才能正常工作。

这对我有用:)

我希望这对您有所帮助

Answer 6

请务必在您的样式之前加载 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 7

据我所知，您可以选择三种不同的字体系列，每种字体系列都有自己需要应用的粗细元素：

第一的

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

希望这可以帮助。