如何在我的CSS中使用fontello中的图标？

I've been using entypo (downloaded from entypo.com), and displaying the icons like so:

我一直在使用entypo(从entypo.com下载),并显示如下图标:

.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.

很标准。但是,当你从entypo.com下载提示时,我已经转而从fontello下载了。只有现在我的CSS内容代码不再起作用了。

I can see in the demo that fontello uses spans like this, to call the icons from the html:

我可以在演示中看到fontello使用这样的跨度来调用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?

但这对我来说似乎很难看。我想从css中做到这一点,但是如何才能找到我的CSS中要放入什么样的代码?

1 个解决方案

#1

Ok, so I found out that what you have to do is not use the codes as mentioned on fontello:

好的,所以我发现你要做的就是不使用fontello上提到的代码:

U+E84D
U+E854

But rewrite these to:

但重写这些:

\E84D
\E854

(so remove the "U+" and replace it with a "\")

(所以删除“U +”并用“\”替换它)

Use them like so:

像这样使用它们:

content: "\E84D";

EDIT:

So, on request, the complete CSS syntax you would use is:

因此,根据要求,您将使用的完整CSS语法是:

.icon:before {
  display: inline-block;
  font-family: 'Entypo';
  text-decoration: none;
  speak: none;
}

.email:before {
  content: "\E84D";
}

In combination with the following HTML:

结合以下HTML:

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

#1