[英]Find out the unicode character code of icon-font icons
I have a font file called icon-font.woff
, and I have the corresponding SVG file.我有一个名为icon-font.woff
的字体文件,我有相应的 SVG 文件。 It has some number of icons inside.它里面有一些图标。 now i would like to use these icons in my html file using css like this:现在我想使用 css 在我的 html 文件中使用这些图标,如下所示:
.icon-add-contact:before{content:""}
But I don't know what is the value I need to give in the content
above.但是我不知道我需要在上面的content
给出什么价值。 And I don't know which value goes to which icon.而且我不知道哪个值属于哪个图标。
How to handle this?如何处理?
According to this article , you should be able to find the unicode codes inside the SVG files of your font. 根据本文的介绍 ,您应该能够在字体的SVG文件中找到unicode代码。 In there, you should see something like this: 在其中,您应该会看到类似以下内容的内容:
<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" />
The unicode attribute will tell you what the code is, in this case it's !
unicode属性将告诉您代码是什么,在这种情况下为!
, but generally it will be something like \\f179
. ,但通常会类似于\\f179
。 This unicode code is what you will need to put after content:
. 您需要在content:
后加上此unicode代码content:
。
The article by Anselm Hannemann (same link as above) describes a method to create an HTML table that will display each icon next to its code. Anselm Hannemann的文章 (与上面相同的链接)描述了一种创建HTML表的方法,该表将在其代码旁边显示每个图标。
There's an easy way: Get the URL of the icon font (usually a .woff), replace it with the "ttf" extension.有一个简单的方法:获取图标字体的 URL(通常是 .woff),将其替换为“ttf”扩展名。 Download that using your browser and install the font.使用浏览器下载并安装字体。 Open the character map, choose the font and browse the characters.打开字符映射表,选择字体并浏览字符。 you either copy the character or use the unicode character it shows you.您要么复制该字符,要么使用它显示的 unicode 字符。 On Windows you can as well open MS Word or Outlook, choose "Insert -> Symbol" to get the character map.在 Windows 上,您也可以打开 MS Word 或 Outlook,选择“插入 -> 符号”以获取字符映射。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.