通过CSS Unicode：之前

81

我在网页上使用了Font Awesome，并且我想在:before伪元素。

根据文档/备忘单，我必须键入才能获得此字体，但是它不起作用。我认为这是正常的，因为中不支持HTML实体:before。
所以我在Google上搜索了一下，发现如果要在中显示HTML实体:before，则必须使用转义的十六进制引用。
所以我正在寻找十六进制参考但一无所获。我认为这是因为这些都是“私有使用”的值，无论这意味着什么。

有什么办法可以使其正常工作:before吗？

— 斯文
source

由于链接是404，您可能正在谈论pseduo元素？您是否尝试content: "";为:before元素添加CSS ？

— 约旦

可以肯定的是：fortawesome.github.com/Font-Awesome

— Stuart Burrows

是的，对不起！链接已修复！@tsujp实际上，该图标应显示在伪元素内。

— Sven 2013年

严格来说，您无法在中显示HTML实体:before。您可以在HTML中显示由实体引用表示的Unicode字符，但不能使用HTML实体语法来做到这一点。

— BoltClock

118

的转义十六进制参考为\f066。

content: "\f066";

— J
source

24

每个人都请查看super_ton的答案，您将需要使用FontAwesome声明字体家族。否则，您只会得到一个特殊的符号，而不是正确的图标！

— lorem猴子

2

对于正在PHP中使用CSS解析的任何人，您都需要像这样对十六进制引用进行两次转义：content：“ \\ f066”;

— ramijames

1

请注意，如果使用Font Awesome 5，则字体家族已更改。看到这里：stackoverflow.com/a/48004111/83542

— Kildareflare

140

在CSS中，FontAwesome Unicode仅在声明了正确的字体系列（版本4或更少）时才起作用：

font-family: "FontAwesome";
content: "\f066";

更新-版本5具有不同的名称：

自由

font-family: "Font Awesome 5 Free"

专业版

font-family: "Font Awesome 5 Pro"

品牌品牌

font-family: "Font Awesome 5 Brands"

看到这个相关的答案：https : //stackoverflow.com/a/48004111/2575724

— 斯蒂芬
source

8

我喜欢您添加字体家族部分的方式，因为这是使我的作品

— 成功

1

请注意，如果使用Font Awesome 5，则字体家族已更改。看到这里：stackoverflow.com/a/48004111/83542

— Kildareflare

1

仅字体家族：FontAwesome为我工作。不是字体系列：“ FontAwesome”

— Sameera R.

令人惊讶的是，除了@Sameera所说的，对我没有任何帮助。可以确认，截至19/10/23，只有font-family：FontAwesome也为我工作。我想使用FA的箭头图标。这是我的代码：a:last-child:after { font-family: FontAwesome; content: '\f061'; }

— sansae

11

Fileformat.info是这个东西的不错的参考。在您的情况下，它已经在十六进制中，因此十六进制值为f066。所以你会做：

content: "\f066";

— 纽创
source

感谢您的回答。由于某种原因，我没有意识到图标是十六进制的。因此，我一直在字符串中输入“＃”，但它不起作用。现在可以了。

— 炮弹

3

图标字体技巧中使用的代码点通常是“专用”代码点，这意味着它们没有一般定义的含义，不应仅在有关方面之间的私下协议中用于开放式信息交换。但是，专用代码点可以表示为任何其他Unicode值，例如在CSS中使用类似这样的符号\f066，就像其他人回答的那样。如果您的文档是UTF-8编码的，并且您知道如何在创作环境中按其编号键入任意Unicode值，则您甚至可以按此方式输入代码点（但当然，通常使用符号将其显示为未知字符）字符）。

但是，这不是使用图标字体的常规方法。通常，您使用字体随附的CSS文件，并使用类似的结构<span class="icon-resize-small">foo</span>。然后，CSS代码将负责在元素的开头插入符号，而您无需知道代码点号。

— Jukka K.Korpela
source

1

首先在HTML文件中链接fontwaesome CSS文件，然后创建一个伪类的after或before伪类，例如“ font-family：“ FontAwesome”; content：“ \ f101”;“ 然后保存。我希望这项工作做好。

— 灰烬阿拉姆
source