Unicode 通过 CSS :before

Posted 2023-02-24

【中文标题】Unicode 通过 CSS :before

【英文标题】：Unicode via CSS :before

【发布时间】：2012-12-27 00:36:16

【问题描述】：

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

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

有没有办法让它在:before 中工作？

【问题讨论】：

既然链接是404，你说的可能是pseduo元素吧？您是否尝试在 CSS 中为您的 :before 元素添加 content: "";？

很确定是这个：fortawesome.github.com/Font-Awesome

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

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

【参考方案1】：

在 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://***.com/a/48004111/2575724

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

【讨论】：

我喜欢你添加 font-family 部分的方式，因为这是让我工作的关键

请注意，如果使用 Font Awesome 5，字体系列已经改变。见这里：***.com/a/48004111/83542

只有字体系列：FontAwesome 为我工作。不是字体系列：“FontAwesome”

令人惊讶的是，除了@Sameera 所说的之外，没有什么对我有用。可以确认，截至 2019 年 10 月 23 日，只有 font-family: FontAwesome 也为我工作。我想使用FA's arrow icon。这是我的代码：a:last-child:after font-family: FontAwesome; content: '\f061';

fontawesome.com/how-to-use/on-the-web/advanced/…

【参考方案2】：

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

content: "\f066";

【讨论】：

大家请看super_ton的回答，你需要用FontAwesome声明font-family。否则你只会得到一个特殊的符号而不是正确的图标！

对于在 php 中使用 CSS 解析的任何人，您需要像这样对十六进制引用进行双重转义： content: "\\f066";

请注意，如果使用 Font Awesome 5，字体系列已经改变。见这里：***.com/a/48004111/83542

【参考方案3】：

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

content: "\f066";

【讨论】：

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

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

重要的是 - 您必须添加字体粗细 (font-weight:900) 才能使其正常工作。

【讨论】：

不错的答案，但最好添加一些理由和解释。