web-dev-qa-db-ja.com

アイコンフォント：どのように機能しますか？

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

Chromeにロードされた関連アイコンフォントリソースをチェックして、アイコンフォントがアイコンをどのように表示するかを確認しました（一般的なフォントと比較して））.

また、利用可能な iconフォントがたくさんあるにもかかわらず、この "アイコンフォントテクニック"の実行方法に関するリソースを見つけることができませんでした 。また、アイコンのフォントが integrated になる方法を示すリソースがたくさんありますが、誰も共有したり書いたりしていないようですhowこれは完了です！

csswebfontsiconsicon-fonts
75
Vivek Chandra

Glyphicons は images およびnotフォントです。すべてのアイコンはSprite画像（個別の画像としても利用可能）内にあり、_backround-image_ sの位置にある要素に追加されます：

Glyphicons

実際のフォントアイコン（ FontAwesome 、たとえば）doは特定のフォントをダウンロードし、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プロパティ は古いブラウザではサポートされていないため 、これらのalsoも images 。

フォントとして使用されている完全に未加工のFontAwesomeの例を次に示します。__（-あなたはこれを見ることができないかもしれません！）を救急車に変えます： http://jsfiddle.net/GWqcF/2

49
James Donnelly

あなたの質問が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の特別な私用予約領域からのものです）。

19
Thilo

ウェブフォントアイコンの仕組みは？

Webフォントアイコンは、CSSを使用して、contentプロパティを使用して特定のグリフをHTMLに挿入することで機能します。次に、@font-faceを使用して、挿入されたグリフのスタイルを設定するDingbat Webフォントを読み込みます。その結果、注入されたグリフが目的のアイコンになります。

まず、特定のASCII文字(A, B, C, !, @, #, etc.)に定義された、またはUnicodeフォントのプライベート使用領域に定義された、必要なアイコンを含むWebフォントファイルが必要です。 Unicodeエンコードされたフォントの特定の文字で使用されないフォント。

詳細、 レスポンシブウェブフォントアイコンでのウェブフォントアイコンの作成方法 。

8
artamonovdev