html - github.com のようなアイコンフォントを実装する方法

Question

アイコンフォントをどのように実装しますか?

Github は Web ページでそれらを広く使用していますが、実装を再現しようとすると失敗に終わります。

ここで試みられた実装を参照してください。

<div id="github">

    <span class="mega-icon mega-icon-blacktocat"></span>

</div>


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

アイコンフォントに関する多くのページを読みましたが、いくつかのチュートリアルを行っても成功しませんでした

初心者。

Update 2013-4-11 提供されたソリューションは WebKit でうまく機能しますが、firefox 20.0 では機能しません http://jsfiddle.net/jsmzm/10/

score 1 · Accepted Answer

score 1 · Accepted Answer

これが更新されたフィドルです。
基本的に、スパンタグに 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";
}

html - github.com のようなアイコン フォントを実装する方法