Is there a way to identify the charCode for a glyph in a custom font?
In order to keep my website lightweight, I have designed a custom font with only the 5 icons from FontAwesome that are necessary using . These icons will replace the characters from the complete FontAwesome set that I had been using during development.
To reduce bandwidth usage, I do not want to include the standard fontawesome CSS file, opting instead for the bare minimum.
This is how I implemented it 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 size of the .svg version of FontAwesome is 253 KB. In contrast, my 5-glyph .svg font is less than 3 KB, resulting in significant bandwidth savings.
However, the (i) glyph does not reside at position "\f05a" within my custom font, nor is it among the characters 012345, ABCDE or abcde. I wish to modify my CSS rule to something like this:
CSS:
.info::before {
font-family:Font5some;
padding: 0 0.5em 0 0;
content: "\xxxx"; /* (i) icon */
}
How can I determine which hexadecimal values to use in place of \xxxx?