[agwa]

I've given it some thought and GitHub should be able to make this more accessible by doing something like this:

    <span class="mini-icon notifications"><span>Notifications</span></span>

Using media queries, serve CSS like this only to screen-like media (i.e. not screen readers):

    .mini-icon.create:before {
       content: "\f030";
    }
    .mini-icon span {
       display: none;
    }

Hopefully they'll adopt something like this, though it wouldn't help people like me who just want a consistent font across the Web.

[notJim]

I think screen readers actually respect display:none. I believe the preferred solution is to use a large, negative text-indent.

[agwa]

That's why you use media queries to set display: none only for non-screen readers.

Of course, screen readers might not respect that, in which your solution would work.

[LocalPCGuy]

I like this rather new solution, which actually works in older browsers including IE7 if you happen to need to support that. Still uses text-indent, but pushes it right instead of left and sets overflow hidden to hide it.

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...