Get the unicode icon value from a custom font

问题

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

.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?

回答1:

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

Install the font.
Open the user installed font in Font Book.
Move the mouse on the desired icon. You should get a title saying unicode value on hover.

回答2:

Edited answer (April 29th, 2015)

@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";"

Answer

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

Install the FontViewer software
Get the font's icon codes from the character map
Use any online code converter, like Rishida Unicode Code Converter, to get the escaped CSS code

If this doesn't work for you...

Option 2)
Use the icomoon app

Sign up AND create a new project
In that project, import your font files (Top left button called "+ Import Icons")
Under Fonts (Bottom right option), you'll see the list of all your icons and respective codes.

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";
}