¿Por qué se implementa el logotipo de github con HTML como fuente?

¿Alguien puede explicar cómo se implementa el pequeño logotipo de octocat en la esquina superior izquierda o en el centro de la página y por qué ?

Todo lo que puedo ver es este marcado:

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

y este CSS:

 .mega-icon-blacktocat:before { content: ""; } .mega-icon { font-family: 'Octicons Regular'; } 

No veo ninguna image allí, así que supongo que están usando la fuente. Pero ¿por qué hay ese extraño personaje and y por qué está en el estilo y no en el HTML?

Es una técnica llamada CSS Fonts, están usando la fuente para replace el text with con un ícono completo, que estará en el file de fuente que crearon.

Permite que el logotipo se escale infinitamente con el sitio en function de la resolución y tiende a networkingucir el time de carga. También pueden cambiar el color y aplicar otras reglas de CSS interesantes, a diferencia de una image.

Cosas como Pictos y Picons son similares, ya que ofrecen una fuente donde puede usar la letra H para mostrar un gráfico circular, por ejemplo.