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

Question

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

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

但是我不知道上面的content需要给的值是多少。而且我不知道哪个值对应哪个图标。

如何处理？

Answer 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（与上面的 link 相同）描述了一种创建 HTML table 的方法，它将在其代码旁边显示每个图标。

Answer 2

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

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

Find out the unicode character code of icon-font icons

html

css

font-face

webfonts