4

ページの左上隅または中央下部にある小さな octocat ロゴがどのように実装されているか、またその理由を説明できる人はいますか?

私が見ることができるのは、このマークアップだけです:

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

そしてこのCSS：

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

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

そこには画像が表示されないので、フォントを使用していると思います。しかし、なぜその奇妙な  文字があり、なぜ HTML ではなくスタイルにあるのでしょうか?

4

1 に答える 1

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.

于 2012-11-21T15:50:09.773 に答える