4

Can anyone explain how the small octocat logo in the top left corner or on the bottom center of the page is implemented and why?

All I can see is this markup: 

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

and this CSS:

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

.mega-icon {
font-family: 'Octicons Regular';
}

I see no picture there, so I guess they're using the font. But why is there that strange  character and why is it in the style and not in the HTML?

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
Oin
  • 6,951
  • 2
  • 31
  • 55

1 Answers1

8

It's a technique called CSS Fonts, they are using the font to replace the  text with a full icon, which will be in the font file they created.

It allows for the logo to scale infinitely with the site depending on resolution and tends to reduce load time. They can also change the colour and apply other cool CSS rules to it, unlike an image.

Things such as Pictos and Picons are similar as they offer a font where you can use the letter H to show a pie chart for example.

Ryan McDonough
  • 9,732
  • 3
  • 55
  • 76