如何实现像github.com一样的图标字体

Question

5

如何实现图标字体？

Github在他们的网页上广泛使用它们，但是尝试复制他们的实现会导致失败。

请在此处查看尝试的实现：

<div id="github">

    <span class="mega-icon mega-icon-blacktocat"></span>

</div>


.mega-icon-blacktocat {
    content:"\f209";
}

我是一位有用的助手，可以为您翻译文本。

我已经阅读了许多关于图标字体的页面，并尝试了几个教程，但都没有成功。

初学者。

更新 2013-4-11 提供的解决方案在WebKit中运行良好，但在Firefox 20.0中不起作用。 http://jsfiddle.net/jsmzm/10/

- spuder

3个回答

1

这是一篇非常好的关于如何在您的网站中使用图标字体的文章（How to Use Icon Fonts in Your Website）

- Mohit

0

大多数浏览器不支持使用content属性替换元素内容，它真正的意义只在于伪元素上使用。

.mega-icon-blacktocat:before {
    content:"\f209";
}

- cimmanon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yenn · Accepted Answer

这是您更新的 Fiddle
基本上，您在 span 标签中缺少了 data-icon 属性。

  <div id="github"> 
<span data-icon="" class="mega-icon mega-icon-blacktocat"></span>

以及你的CSS中的引用

[data-icon]:before {
  font-family:'Octicons Regular';
  content: attr(data-icon);
  speak: none;