如何实现类似github.com的图标字体

Question

如何实现图标字体？

Github 在其网页上广泛使用它们，但尝试重现其实现结果却失败了。

https://github.com/styleguide/css/7.0

请参阅此处尝试的实施：

http://jsfiddle.net/spuder/jsmzm/7/

<div id="github">

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

</div>


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

我已经阅读了很多关于图标字体的页面，并且浏览了几个教程但没有成功

如何使用图标字体

http://css-tricks.com/examples/IconFont/

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-ever-thought-about-using-font-face-for-icons/

将 Unicode 字符放入 CSS 内容值中

初学者。

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

Answer 1

这是您的小提琴更新
\n基本上您缺少 span 标记中的 data-icon 属性

\n\n

  <div id="github"> \n<span data-icon="\xef\x88\x89" class="mega-icon mega-icon-blacktocat"></span>\n

\n\n

以及你的CSS中的引用

\n\n

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

\n