Get the unicode icon value from a custom font

Question

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?

Solution 1

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

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.

Solution 2

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

Solution 3

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.

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

If this doesn't work for you...

Option 2)
Use the icomoon app

1. Sign up AND create a new project
2. In that project, import your font files (Top left button called "+ Import Icons")
3. 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";
}

Comments

[al404IT]

i know hot to write the CSS part i don't know how to get, from a customized font, the corresponding code to use in content: "xxxxx";

[Omar]

@al404IT While I look for an answer to your question, I would suggest to edit your question and start a bounty. This is due to your question not being clear as to what you really want (to get the "CSS content" codes from the font files)

[al404IT]

with font viewer i can't see any info about character under character map, with second method i can import my font that is a .ttf file it says "Please choose SVG images, SVG fonts or JSONs exported by IcoMoon."

[timiscoding]

Make sure you click on the grid icon in the toolbar as I found the hover didn't work initially because the first icon is selected by default.

[adam]

this is the only solution that could read the ttf file i had, thanks so much

[Jono]

what about for windows?

[Micer]

@Jonathan I have no idea sorry, the question was about MacOS.

[E Benzle]

This is the thing that finally worked for me as well.

[Matty J]

For Windows you can use the system program 'Character Map' @Jonathan. As I recall you need to turn on a menu option in the program to see the unicode value.