【问题标题】:How do I use icons from fontello in my css?如何在我的 CSS 中使用 fontello 的图标?
【发布时间】:2013-10-04 13:42:28
【问题描述】:

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

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

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

相当标准。但是由于当您从 entypo.com 下载它时提示已关闭,所以我已切换到从 fontello 下载它。只是现在我的 css 内容代码不再起作用了。

我可以在演示中看到 fontello 使用这样的跨度,从 html 中调用图标:

<span class="i-code">0xe829</span>

但这对我来说似乎很难看。我想从 css 中做,但我怎样才能找出在我的 css 中放入什么样的代码?

【问题讨论】:

    标签: html css pseudo-element icon-fonts fontello


    【解决方案1】:

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

    U+E84D
    U+E854
    

    但是将这些重写为:

    \E84D
    \E854
    

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

    像这样使用它们:

    content: "\E84D";
    

    编辑:

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

    .icon:before {
      display: inline-block;
      font-family: 'Entypo';
      text-decoration: none;
      speak: none;
    }
    
    .email:before {
      content: "\E84D";
    }
    

    结合以下 HTML:

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

    【讨论】:

    • 能否请您显示带有修复程序的完整标签?我不明白。
    • @krivar,好的,我添加了完整的语法。您可以在此处找到 css 内容代码:gist.github.com/pnull/4510484。如果您还有其他问题,请告诉我!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-21
    • 2021-03-24
    相关资源
    最近更新 更多