CSS 从自定义字体中获取 unicode 图标值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27247145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:48:16  来源:igfitidea点击:

Get the unicode icon value from a custom font

cssmacosfontsiconsglyphicons

提问by al404IT

I need to write a CSS for an icon font build using the site flaticon. I develop using a MAC with 10.10 and can't find any way to retrieve a single character Unicode value that I need to insert inside my CSS

我需要使用站点flaticon为图标字体构建编写 CSS 。我使用 10.10 的 MAC 进行开发,但找不到任何方法来检索需要插入到 CSS 中的单个字符 Unicode 值

.font-icon-pencil:before {
    content: "\e038";
}

How can I read the contents of a font file, to get the icon codes within that custom-made font?

如何读取字体文件的内容,以获取该自定义字体中的图标代码?

回答by Micer

On MacOS Sierra I'm able to get a unicode value of icon in Font Book(default app).

在 MacOS Sierra 上,我能够在Font Book(默认应用程序)中获得图标的 unicode 值。

  1. Install the font.
  2. Open the user installed font in Font Book.
  3. Move the mouse on the desired icon. You should get a title saying unicode value on hover.
  1. 安装字体。
  2. 在 Font Book 中打开用户安装的字体。
  3. 将鼠标移动到所需的图标上。你应该得到一个标题,上面写着悬停时的 unicode 值。

Font Book

字体书

回答by Omar

Edited answer (April 29th, 2015)

编辑后的答案(2015 年 4 月 29 日)

@al404it commented: "I know how to write the CSS part. I don't know how to get, from a customized font, the corresponding code to use in content: "xxxxx";"

@al404it 评论说:“我知道如何编写 CSS 部分。我不知道如何从自定义字体中获取内容中使用的相应代码:“xxxxx”;”



Answer

回答

Option 1)
Font Viewer, OR similar font viewer software
This is the easiest option.

选项1)
字体浏览器,或小号imilar字体观众softwarË
这是最简单的选项。

  1. Install the FontViewer software
  2. Get the font's icon codes from the character map
  3. Use any online code converter, like Rishida Unicode Code Converter, to get the escaped CSS code
  1. 安装FontViewer 软件
  2. 从字符映射中获取字体的图标代码
  3. 使用任何在线代码转换器,如Rishida Unicode Code Converter,获取转义的 CSS 代码

If this doesn't work for you...

如果这对您不起作用...

Option 2)
Use the icomoon app

选项 2)
使用icomoon 应用程序

  1. Sign up AND create a new project
  2. In that project, import your font files (Top left button called "+ Import Icons")enter image description here
  3. Under Fonts (Bottom right option), you'll see the list of all your icons and respective codes.
  1. 注册并创建一个新项目
  2. 在该项目中,导入您的字体文件(左上角的按钮称为“+ 导入图标”)在此处输入图片说明
  3. 在字体(右下选项)下,您将看到所有图标和相应代码的列表。

This should work for sure.

这应该肯定有效。



Original answer

原答案

@font-face {
    font-family: icons;
    src: url(MyFont.ttf); /* Replace with thatever your font file is */
}
.font-icon-pencil:before {
    font-family: icons, sans-serif;;
    content: "\e038";
}

回答by warfish

https://fontdrop.info: Very useful website where you can see all the unicode codes at once

https://fontdrop.info:非常有用的网站,您可以在其中一次查看所有 unicode 代码