How do I use icons from fontello in my css? - html

Question

I've been using entypo (downloaded from entypo.com), and displaying the icons like so:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\2709";
}
Pretty standard. But since the hinting is off when you download it from entypo.com, I've switched to downloading it from fontello. Only now my css content codes don't work anymore.
I can see in the demo that fontello uses spans like this, to call the icons from the html:
<span class="i-code">0xe829</span>
But that just seems ugly to me. I want to do it from the css, but how can I find out what kind of codes to put in my css?

Answer 1

Ok, so I found out that what you have to do is not use the codes as mentioned on fontello:
U+E84D
U+E854
But rewrite these to:
\E84D
\E854
(so remove the "U+" and replace it with a "\")
Use them like so:
content: "\E84D";
EDIT:
So, on request, the complete CSS syntax you would use is:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\E84D";
}
In combination with the following HTML:
Mail me