html - 如何实现 github.com 之类的图标字体

Question

你如何实现图标字体？

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/

score 1 · Accepted Answer

1

于 2013-08-18T14:23:57.700 回答

score 1 · Accepted Answer

这是您的小提琴更新
，基本上您在 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;

score 0 · Accepted Answer

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

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

3 回答 3