列出与字体和“content:'\value'”一起使用的图标/字形答案

【问题标题】：Listing the Icons/Glyphs used with a font and "content:'\value'"列出与字体和“content:'\value'”一起使用的图标/字形
【发布时间】：2016-10-22 05:20:04
【问题描述】：

我正在编辑一个预先存在的站点，该站点在 eot、svg、w0ff、ttf 等众多文件中使用图标/字形（我猜是为了各种兼容性）。它使用字体和 CSS 值来调用这些，如下所示：

font-family: icons_filename;
content: "\e601";

那么，我如何找到用“内容”调用的图标的不同值的列表？

换句话说，我想看看在一个未记录的图标库中可能发生什么，这些图标不一定有一个好的名称列表。

我也不明白如何使用值“\e601”或如何在文件中查找它。这部分 CSS 对我来说并不熟悉，我找不到很好的解释，因为大多数图标教程只展示了如何使用文档库。

谢谢

【问题讨论】：

什么是字体系列？
它是 WOFF，“网络开放字体格式”，而不是 w0ff。如果您的工作是为未来维护这一点：自 3 年前以来，网络字体领域发生了很多变化，此时您仅需要 WOFF 源。除非你需要 IE8 及更低版本的支持（微软在 2016 年 1 月甚至不再支持，它最终将它们杀死）在这种情况下你需要 WOFF 和 EOT，仅此而已。其余的只是浪费时间和带宽。

标签： html css svg fonts icons

【解决方案1】：

我相信您正在寻找 UTF-8 字符。如果存在，图标字体通常会覆盖此通用图标字体上的默认字体。这是link to where you can view them。

【讨论】：

顺便说一下，这些图标字体库中的大多数已经有很好的文档了。

【解决方案2】：

加上 Chris 已经说过的内容，您应该能够追踪您的模板/主题正在使用哪个字体图标库。其中最常见的例子之一是Font Awesome。

通过上面的链接，您将能够浏览每个图标并确定选择哪个“unicode”。例如，“fa-blind”（盲人行走图标）的 unicode 为“f29d”，将其用于 CSS 属性“content”时会转换为“\f29d”

如果您的样式表以 UTF-8 格式提供，您可以避免使用 unicode（在我们的示例中为 f29d），并直接复制/粘贴在网站上为您列出的图标（即，而不是“\ f29d”，它将是实际的 fa-blind 图标字形。它会在您的 CSS 文档中显示为一个空白方块，但当您在网页上时会正确呈现。）

我可能在这里讨论的时间太长了，但最终你需要做的是弄清楚网站正在使用哪个图标库。如果提供链接，我们可以很容易地为您找出答案。

【讨论】：