如何实现 github.com 之类的图标字体答案

【问题标题】：How to implement icon fonts like github.com如何实现 github.com 之类的图标字体
【发布时间】：2013-04-07 00:19:22
【问题描述】：

如何实现图标字体？

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/

【问题讨论】：

【解决方案1】：

here is your fiddle updated
基本上你在 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;

【讨论】：

【解决方案2】：

这是How to Use Icon Fonts in Your Website上的一篇很好的文章

【讨论】：

【解决方案3】：

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

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

【讨论】：