简体   繁体   English

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

[英]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.

相关问题 图标字体偶尔显示为正方形,并在悬停时返回图标 - Icon-font sporadically shows up as squares and back to icon on hover 在父div中心的范围内对齐文本和图标字体图标 - Align text and icon-font icon in span at center of parent div 如果我有一个生成的图标字体作为TTF,我可以告诉哪个CSS内容属性属于哪个字符吗? - If I have a generated icon-font as TTF, can I tell which CSS content-property belongs to which character? 将图标字体范围与文本范围对齐 - Align icon-font span with text span in line 如何正确编码UNICODE FONT ICONS,以便在所有浏览器上呈现 - How to properly code UNICODE FONT ICONS so they render on all browsers 如何用CSS文件中的普通图像源替换图标字体源 - How to replace icon-font source with normal image source in CSS file 我正在尝试将按钮图标旁边的字体真棒图标对齐,并将它们隔开,如示例所示 - I'm trying to align font awesome Icons next to a button icon and have them spaced out as shown in the example Bootstrap,Font Awesome 不显示图标但图标在旋转 - Bootstrap, Font awesome not showing the icons but the icon is spinning 图标字体链接图标在iPhone上不可应用 - Icon font link icons are untappable on iphone Font Awesome unicode 图标在 Firefox 中不起作用 - Font Awesome unicode icon is not working in firefox
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM