How do I use icons from fontello in my css?

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?

Atalya

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:

<a href="#" class="icon email">Mail me</a>

Atalya

can you please show the full tag with the fix? I don't understand. – Spireme

@krivar, Ok I added the complete syntax. You can find the css content codes here: gist.github.com/pnull/4510484. Let me know if you have any other questions! – Atalya