Html 如何在我的 css 中使用 fontello 中的图标?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19182791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:06:06  来源:igfitidea点击:

How do I use icons from fontello in my css?

htmlcsspseudo-elementicon-fontsfontello

提问by

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: "09";
}

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 中放入什么样的代码?

回答by

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>