html - CSS 疑似要素を使用してコンテンツを使用してアイコンを表現する

Question

次の CodePen に出くわしました: http://codepen.io/html5web/pen/enlAc。ソースの最後に、次のコード行があります。

.twitter:before {
  content:"\F021";
}
.in:before {
  content:"\F022";
}
.vimeo:before{
  content:"\F024"; 
}

興味深いことに、コンテンツプロパティの魔法の値により、アイコンが表示されます。値がどのように、どこから来たのか、なぜこれが機能するのか理解できません。これはどのように可能ですか？

score 2 · Accepted Answer

特定の文字の CSS 16 進値です。それはアイコンを作成しません-さまざまなアイコンを特定の10進数/ASCII文字値に割り当てるアイコンフォントを使用しています。「アイコンフォント」をグーグルで検索するだけで、これに関する多くの情報が見つかります。

参照：

また、:beforeand:afterは疑似要素であり、疑似クラスではありません。

score 0 · Accepted Answer

これは、フォントファイルのために可能です。提供されるコンテンツは、アイコンにつながるフォント内の文字です。

2 に答える 2