找出icon-font图标的unicode字符码

Posted 2023-02-19

【中文标题】找出icon-font图标的unicode字符码

【英文标题】：Find out the unicode character code of icon-font icons

【发布时间】：2016-09-30 15:23:03

【问题描述】：

我有一个名为 icon-font.woff 的字体文件，并且我有相应的 SVG 文件。它里面有一些图标。现在我想使用 css 在我的 html 文件中使用这些图标，如下所示：

.icon-add-contact:beforecontent:""

但我不知道我需要在上面的content 中给出什么值。而且我不知道哪个值对应哪个图标。

如何处理？

【问题讨论】：

用谷歌搜索一下：gomakethings.com/icon-fonts希望对您有所帮助

您只有 .woff 文件？或者你也有 svg 的图标？

是的，我也有 svg。但并非总是适用于所有字体

【参考方案1】：

根据this article，您应该能够在您的字体的 SVG 文件中找到 unicode 代码。在那里，您应该会看到如下内容：

<glyph unicode="!" horiz-adv-x="100" d="M83.522656250000011
              38.628515624999999 C85.970996093749989 38.628515625000006
              90.867675781250000 38.628515625000006 93.316015624999977
              38.628515625000006 C94.026953124999977 38.628515625000006
              94.737695312500023 z" />

unicode 属性会告诉你代码是什么，在这种情况下它是!，但通常它会类似于\f179。此 unicode 代码是您需要在 content: 之后添加的代码。

article by Anselm Hannemann（与上面的链接相同）描述了一种创建 HTML 表格的方法，该表格将在其代码旁边显示每个图标。

【讨论】：

我看到我的 unicode 是这样的：unicode="" - 我拿走了这一切，但没有用。然后我拿了E008 - 也没有运气

试试'\E008' - 比较一下：w3.org/International/questions/qa-escapes

是的，它是有效的。如果我没有svg - 文件，那么很难阅读unicode

@KWeiss，神奇的翻译器是 Unicode="" --> "\E008"... 很有帮助。很多谢谢。请注意，Anselm Hanneman 链接现已失效。

【参考方案2】：

有一个简单的方法： 获取图标字体的 URL（通常是 .woff），将其替换为“ttf”扩展名。使用浏览器下载并安装字体。 打开字符图，选择字体并浏览字符。您要么复制字符，要么使用它显示给您的 unicode 字符。 在 Windows 上也可以打开 MS Word 或 Outlook，选择“插入 -> 符号”以获取字符映射。