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?

font family is "MyFont" but it doesn't really metter, in CSS for each icon i need to make a specific class with specific character unicode value, i guess the start from 001,002, etc — al404IT, Dec 02 '14 at 10:39

score 23 · Answer 1 · answered Feb 15 '17 at 12:14

23

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.

answered Feb 15 '17 at 12:14

Micer

8,731
3
79
73

10

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. – timiscoding Jun 26 '17 at 05:31
what about for windows? – Jono Jun 08 '20 at 10:39
@Jonathan I have no idea sorry, the question was about MacOS. – Micer Jun 08 '20 at 12:36
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. – Matty J Oct 07 '21 at 07:15

warfish · Answer 2 · 2021-10-22T05:42:00.560

12

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

edited Oct 22 '21 at 05:42

answered Apr 24 '19 at 13:06

warfish

613
5
20

1

this is the only solution that could read the ttf file i had, thanks so much – adam Mar 31 '20 at 11:00
1

This is the thing that finally worked for me as well. – E Benzle Jul 15 '21 at 21:35

Omar · Answer 3 · 2016-04-12T03:48:37.250

9

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

edited Apr 12 '16 at 03:48

answered Apr 24 '15 at 00:44

Omar

11,783
21
84
114

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"; – al404IT Apr 24 '15 at 07:59
@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) – Omar Apr 29 '15 at 21:25
4

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." – al404IT May 05 '15 at 07:22

Get the unicode icon value from a custom font

3 Answers3

Answer

Original answer

Linked