98

アイコンフォントは単なるフォントであり、クラス名を呼び出すだけでアイコンを取得できることは理解していますが、アイコンフォントはどのように機能しますか?

Chrome にロードされた関連するアイコン フォント リソースをチェックして、アイコン フォントがアイコンをどのように表示するか (一般的なフォントと比較して) を確認しようとしましたが、これがどのように発生するかを理解できませんでした。

また、利用可能なアイコン フォントがたくさんあるにも関わらず、この「アイコン フォント手法」がどのように行われるかについてのリソースを見つけることができませんでした。アイコンフォントを統合する方法を示すリソースもたくさんありますが 、これがどのように行われるかについて誰も共有したり書いたりしていないようです!

4

3 に答える 3

57

グリフィコンは画像であり、フォントではありません。すべてのアイコンはスプライト画像 (個別の画像としても利用可能) 内にあり、配置されたbackround-images として要素に追加されます。

グリフィコン

実際のフォント アイコン (たとえば、 FontAwesome ) には、特定のフォントのダウンロードがcontent含まれ、次のようなプロパティが使用されます。

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

このcontentプロパティは古いブラウザーではサポートされていないため、これらもimagesを使用します。

以下は、完全に未加工の FontAwesome をフォントとして使用し、( - これは見えないかもしれません!) 救急車に変えた例です: http://jsfiddle.net/GWqcF/2

于 2013-03-19T15:13:29.257 に答える
25

CSS クラスが特定の文字 (特殊なフォントでアイコンとしてレンダリングされる) を挿入する方法について質問がある場合は、FontAwesome のソースをご覧ください。

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

そのため、CSS コンテンツ ディレクティブを使用して文字を挿入します (これは、他のリーダーを混乱させない Unicode の特別な私用予約領域からのものです)。

于 2013-03-19T15:13:44.827 に答える