如何實現圖標字體，如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"; 
} 

我沒有成功讀取圖標字體多頁，並經歷幾個教程

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/

Answer 1

here is your fiddle updated
基本上你失蹤在跨度的數據圖標屬性標籤

<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

大多數瀏覽器不支持content屬性來替換元素的內容。它真的只是用於僞元素。

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

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

Answer 3

這裏是How to Use Icon Fonts in Your Website