查找图标字体图标的Unicode字符代码

Question

我有一个名为 icon-font.woff 的字体文件，还有对应的SVG文件。里面有一些图标。现在我想使用CSS将这些图标应用到我的HTML文件中，就像这样：

.icon-add-contact:before{content:""}

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

该如何处理？

- 3gwebtrain

---

通过一番谷歌搜索，我找到了这个网站：http://gomakethings.com/icon-fonts/ 希望它能帮到你。 - Bram B

你只有.woff文件吗？还是你也有svg格式的图标？ - KWeiss

是的，我也有SVG。但并不总是适用于每种字体。 - 3gwebtrain

Answer 1

根据这篇文章，您应该能够在字体的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:之后放置的内容。 Anselm Hannemann的文章（与上面相同的链接）描述了一种创建HTML表格的方法，该表格将在每个图标旁显示其代码。

- KWeiss

---

我看到我的Unicode是这样的: unicode="" - 我尝试了所有方法，但都没有成功。然后我尝试了 E008 - 也没有运气。 - 3gwebtrain

尝试使用 '\E008' - 比较一下这个链接：https://www.w3.org/International/questions/qa-escapes - KWeiss

是的，它能正常工作。如果我没有svg文件，那么阅读unicode会变得非常困难。 - 3gwebtrain

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

Answer 2

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

- cygro