CharCodes for glyphs in a custom font from http://fontello.com

Question

How can I find the charCode for a glyph in a custom font?

For a light-weight web site, I have created a custom font containing just the 5 icons from FontAwesome that I need, using http://fontello.com. I am hoping to use these to replace the characters from the complete FontAwesome collection that I have been using during development.

To save bandwidth, I don't want to include the standard fontawesome CSS file: I want the strict minimum.

Here's how it works for me with FontAwesome:

HTML:

<p class="info"> — an (i) for Info icon should appear at the beginning of this line</p>

CSS:

.info::before {
font-family:FontAwesome;
padding: 0 0.5em 0 0;
content: "\f05a"; /* (i) icon */
}

The .svg version of FontAwesome weighs in at 253 KB. My 5-glyph .svg font weighs less than 3 KB, so the bandwidth savings are considerable.

However, the (i) glyph is not at the position "\f05a" inside my custom font, nor is it among the characters 012345, ABCDE or abcde. I'd like to change my CSS rule to something like this:

CSS:

.info::before {
font-family:Font5some;
padding: 0 0.5em 0 0;
content: "\xxxx"; /* (i) icon */
}

How do I discover what hexadecimal digits to use instead of \xxxx?

Answer 1

When you create your font on Fontello.com, at the top of the page next to "Select Icons", you'll see "Customize Codes". You can both see and customize your font codes there, or alternatively, you can find the codes in your Fontello demo.html file.

Answer 2

Just open the SVG file in a text editor; the codes will be in there, like:
glyph unicode=""