86

我在我的网页上使用Font Awesome，我想在:before伪元素内显示一个图标。

根据文档/备忘单，我必须输入才能获取此字体，但它不起作用。我认为这是正常的，因为:before.
所以我用谷歌搜索了一下，发现如果你想在 中显示 HTML 实体:before，你必须使用转义的十六进制引用。
所以我正在寻找十六进制引用，但我什么也没找到。我相信那是因为这些都是“私人使用”的价值，不管这意味着什么。

有什么办法让它工作:before吗？

4

6 回答 6

154

在 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

根据评论（BuddyZ），这里有更多信息https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

于 2014-08-15T15:26:21.707 回答
124

is的转义十六进制引用\f066。

content: "\f066";
于 2013-01-12T15:52:57.340 回答
11

Fileformat.info是一个很好的参考。在您的情况下，它已经是十六进制，所以十六进制值为f066. 所以你会这样做：

content: "\f066";
于 2013-01-12T15:53:23.257 回答
3

图标字体技巧中使用的代码点通常是私人使用的代码点，这意味着它们没有普遍定义的含义，不应该用于开放信息交换，只能通过相关方之间的私人协议。但是，私人使用代码点可以表示为任何其他 Unicode 值，例如在 CSS 中使用类似 的符号\f066，正如其他人所回答的那样。如果您的文档是 UTF-8 编码的并且您知道如何在您的创作环境中通过其编号键入任意 Unicode 值（当然它通常会使用未知符号显示），您甚至可以这样输入代码点特点）。

但是，这不是使用图标字体的正常方式。通常，您使用随字体提供的 CSS 文件并使用<span class="icon-resize-small">foo</span>. 然后 CSS 代码将负责在元素的开头插入符号，您不需要知道代码点编号。

于 2013-01-12T18:40:01.330 回答
1

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

于 2018-04-11T04:07:28.867 回答
0

重要的事情 - 你必须添加字体重量（字体重量：900）才能让它工作。

于 2021-07-22T14:59:57.867 回答