如何实现像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/

在CSS内容值中放置Unicode字符

初学者。

更新2013-4-11提供的解决方案在WebKit中工作得很好，在Firefox20.0 http://jsfiddle.net/jsmzm/10/中不起作用。

Answer 1

这是你的小提琴更新了

基本上，您在span标记中缺少了数据图标属性。

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

Answer 2

这里有一篇关于如何在网站中使用图标字体的很好的文章

Answer 3

大多数浏览器不支持content属性来替换元素的内容。它实际上只适用于伪元素。

http://jsfiddle.net/jsmzm/11/

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