如何实现图标字体?
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/
Placing Unicode character in CSS content value
初学者。
更新 2013-4-11 提供的解决方案在 WebKit 中运行良好,在 firefox 20.0 中不起作用 http://jsfiddle.net/jsmzm/10/
最佳答案
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;
关于html - 如何实现像github.com这样的图标字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16005795/