All geek questions in one place

Why is the github logo implemented using HTML as a font?

Can someone explain how the logo of the small octocat is implemented in the upper left corner or in the lower center of the page and why?

All I see is the markup:

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

and this CSS:

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

I do not see the images there, so I think they use a font. But why is this weird character and why is it in style and not in HTML?

+4
source share
1 answer

This is a method called CSS Fonts, they use a font to replace the full icon text that will be in the font file that they created.

This allows the logo to scale unlimitedly with the site, depending on the resolution, and tends to reduce download time. They can also change color and apply other cool CSS rules to it, as opposed to images.

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

+8
source

Source: https://habr.com/ru/post/1447524/

More articles:


All Articles