If I have a generated icon-font as TTF, can I tell which CSS content-property belongs to which character?

Question

I have a .ttf icon-font for which I have lost the guide. I am able to view the complete character set in FontBook. Is there any way to figure out which CSS content-property I can use to access each character in the font-set?

Answer 1

To complete Diodeus' answer, you have to define a new font-face in your stylesheet :

@font-face {
   font-family: 'MyIconsFont';
   src: url("res/icons/MyTrueTypeFont.ttf") format("truetype");
   font-weight: normal;
   font-style: normal
}
.my-icons {
   display: inline-block;
   font-family: 'MyIconsFont';
}
.my-icons.some-symbol:before {
   content: '\0061';  // Set the proper character index here
}
.my-icons.some-other-symbol:before {
   content: '\0064';  // Set another proper character index here 
}

Then use the defined styles in a dummy <span> or <i> tag:

<p>Here is some some symbol : <span class="my-icons some-symbol"></span> 
and some other <i class="my-icons some-other-symbol"></i></p>

To find out about the characters indexes, you can inspect your font in Word's Insert > Symbol > Other

Answer 2

If you know the UTF-8 character code for the glyph in your font, you can specify it in the content: declaration in your CSS:

.example { content: "\203A" }

See also: Adding HTML entities using CSS content

Answer 3

You can use FontForge to inspect the font and view the various notations for that glyph.

Alternatively if you convert the .ttf file to an .svg file, you can see the Unicode notations of every glyph in the file.

You can then use e.g. an entity converter to find out the ASCII representation of the Unicode notation, which you can use for the CSS content: property.