Font icons - how to retrieve symbol code?

Question

I have this issue, I have a font-set without documentation (icons as a font). I want to use them but I have to somehow know what are specific codes for particular symbols. Is there a way how can I retrieve it?

For example to use it as in the below example:

.icon-box {
   &:before {
    content: "\e088";
   }
}

EDIT

We have the following files: *.eot / *.svg / *.ttf / *.woff

I think you are using metro-ui-css icon fonts: github.com/olton/Metro-UI-CSS/blob/master/less/… . And it should be .icon-box:before instead of icon-box . More details here : metroui.org.ua/icons.html — K K
This depends on the format of the font. But you could use some heuristics: assuming that the font uses Private Use codes U+E000...U+E0FF for the icons, you can set up an HTML document that contains those code points and has a CSS rule for using the icon font for them. — Jukka K. Korpela
This is a really interesting one for me. It will be using private use areas like @JukkaK.Korpela mentioned. I personally use FontExplorer as it gives you a nice character summary; I appreciate, however, that this is not a free piece of software. This image shows the FontExplorer summary. I’m going to keep looking for a solution as someone has bound to have developed something to do this. — Stuart

Jukka K. Korpela Jukka K. Korpela · Accepted Answer · 2014-07-22T12:55:46

When you have an icon font without documentation, you can

Create an HTML document containing a suitable range of characters, with font set to the icon font. Typically, icon fonts use either a Private Use range like U+E000...U+E0FF or U+F000... or the Latin1 range U+0000...U+00FF. You may need to try different ranges.
Use a font inspector, such as OTM Light (free), provided that it can handle the font format you have.

Font icons - how to retrieve symbol code?

1 Answers