How to implement icon fonts like github.com

Question

How do you implement an icon font?

Github uses them extensively on their webpage, yet trying to reproduce their implementation results in failure.

See the attempted implementation here:

<div id="github">

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

</div>


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

I've read many pages on icon fonts, and gone through several tutorials with no success

Beginner.

Update 2013-4-11 The solution provided works great in WebKit, it does not work in firefox 20.0 http://jsfiddle.net/jsmzm/10/

score 1 · Accepted Answer · answered Apr 15 '13 at 00:26

1

here is your fiddle updated
basically you were missing the data-icon attribute in your span tag

  <div id="github"> 
<span data-icon="" class="mega-icon mega-icon-blacktocat"></span>

and the reference in your css

[data-icon]:before {
  font-family:'Octicons Regular';
  content: attr(data-icon);
  speak: none;

answered Apr 15 '13 at 00:26

Yenn

Excellent! I noticed you use the actual UTF character  . Is there a way to use the ascii value instead? I'm trying data-icon="\f209" with no luck. – spuder Apr 15 '13 at 00:38

score 1 · Answer 2 · answered Aug 18 '13 at 14:23

1

answered Aug 18 '13 at 14:23

Mohit

cimmanon · Answer 3 · 2013-04-15T01:11:44.407

0

Most browsers don't support the content property to replace an element's contents. Its really only meant to be used on pseudo elements.

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

edited Apr 15 '13 at 01:11

answered Apr 15 '13 at 01:03

cimmanon

3 Answers3