html5 – 如何实现像github.com这样的图标字体

2023年11月26日 196次阅读

你如何实现图标字体？

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

 我已经阅读了许多关于图标字体的页面,并且经历了几个教程但没有成功

How to use icon fonts

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

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

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