Webフォントを使用した、より良く、より鮮明なUIアイコンのガイド

Webサイトにアイコンを表示するために（PNGやGIFなどの）ビットマップ画像形式を使用することに慣れている場合は、その欠点にも精通しているでしょう。まず第一に、サイズとアイコンの色情報の数によっては、アイコンファイルのサイズが非常に大きくなる可能性があります。.

Webサイトに配置するにはアイコンが多すぎると、多くのHTTP要求がブラウザによって行われるため、Webサイトのパフォーマンスが低下する可能性があります。この問題はCSSスプライトで解決できますが、ファイルサイズはまだ大きいです.

ビットマップアイコンには、柔軟性とスケーラビリティの点でも欠点があります。アイコンをあるレベルまで拡大またはズームするか、あるいは網膜ディスプレイなどの非常に高い画面解像度でそれを見る必要があるとしましょう。アイコンは間違いなく ぼやけて見える.

さて、もしあなたが上記の事柄のいくつかを考慮に入れるなら、あなたはおそらくアイコンフォントを使う必要があります.

アイコンフォントの使用

あ アイコンのフォント 後で使用するWebサイトに埋め込むことができるWebフォントにパックされたアイコンのセットです。 @フォントフェイス. CSS-trickのChrisが指摘しているように、アイコンを配信するために画像の上にフォントを使用することには多くの利点があります。

フォントは、その性質上、解像度に依存しないベクトルベースのオブジェクトであるため、非常に高い画面解像度（網膜レベルなど）を含むさまざまな画面解像度で、アイコンは鮮明なままになります。.
それはまたスケーラブルであり、品質と精度を失うことなくそれを多くのレベルで拡大することを可能にする。.
アイコンは基本的にフォントなので, 色、透明度、テキストの影を制御したり、スタイルシートでサイズを変更したりすることもできます。
CSS3でアイコンをアニメートすることもできます.
アイコンは @フォントフェイス Internet Explorer 4からサポートされているルール（.eot付き）.
少ないHTTPリクエストと低いファイルサイズ.

ここで私たちが見つけることができる最高の無料アイコンフォントのいくつかは以下のとおりです。

素晴らしいフォント
イコムーン
ソーシャルメディアのアイコン
Zurb Foundationのアイコン

著者の時間と努力を尊重するためにあなたのウェブサイトにそれを埋め込む前にあなたがライセンスをチェックして、それに従ったことを確かめてください.

@フォントフェイスルール

すでに述べたように、アイコンはを使って埋め込まれています。 @フォントフェイス 新しいスタイルシートを定義するルール フォントファミリー. 次の例ではWebシンボルを使います。

 @ font-face font-family： 'WebSymbolsRegular'; src：url（ 'fonts / websymbols-regular-webfont.eot'）; src：url（ 'fonts / websymbols-regular-webfont.eot？#iefix'）フォーマット（ 'embedded-opentype'）、url（ 'fonts / websymbols-regular-webfont.woff'）フォーマット（ 'woff'）、url （ 'fonts / websymbols-regular-webfont.ttf'）format（ 'truetype'）、url（ 'fonts / websymbols-regular-webfont.svg＃WebSymbolsRegular'）format（ 'svg'）;

それから、HTML文書では、新しい文字列を適用するのではなく、アイコンを表す文字を追加するだけで済みます。 フォントファミリー ドキュメントの中で広く使われているように、アイコンをレンダリングする必要がある特定の要素に特別なクラスを追加することでより具体的に行うことができます。

  時間
 私
 j
 A
 私

スタイルシートに戻って、新しい定義をします。 フォントファミリー そのクラスに追加したばかりです。

 .icon-font font-family：WebSymbolsRegular;フォントサイズ：12pt。

Demo @ font-face

擬似要素を使う

アイコンがサイド要素として扱われる場合は、アイコンを介して配信することもできます。 疑似要素. HTMLマークアップが次のようになっていると仮定します。

  応答
 全員に返信
 進む
 添付ファイル
 画像

スタイルシートでこうすることができます。

 ul.icon-font.pseudo li：before font-family：WebSymbolsRegular;右マージン：5px。 ul.icon-font.pseudo li：nth-child（1）：content： "h";の前ul.icon-font.pseudo li：nth-child（2）：content： "i"の前; ul.icon-font.pseudo li：nth-child（3）：content： "j";の前。 ul.icon-font.pseudo li：nth-child（4）：content： "A";の前。 ul.icon-font.pseudo li：nth-child（5）：content： "I";の前。

デモ擬似要素

私用Unicode

アイコンが文字（A、B、C、Dなど）に埋め込まれていないが、文字間の衝突を最小限に抑えるためにUnicode Private Useに埋め込まれている状況があります。 FontAwesomeのように、作者は幸運にもこのように見えるスタイルシートのすべての文字コードを追加しました。

 .アイコンガラス：content： "\ f0c6";の前

しかし、アイコンをHTMLに直接埋め込む必要がある場合は、次のようなコードになります。 \ f0c6 ポインティングされたアイコンはHTMLでエンコードされた有効な文字ではないため、レンダリングされません。.

HTMLには数値参照マークアップが必要です 特殊文字をレンダリングします。 CSS3ボタンに関する前回のチュートリアルでは、これについて少し説明しました。この文字の先頭にはアンパサンド記号（＆）、ハッシュ記号（＃）と バツ その後に文字を表す16進数が続きます。.

例えば、 f0c6 は16進数なので、HTMLの数字参照は次のようになります。 ＆＃xf0c6;, FontAwesomeでは、そのコードは ペーパークリップのアイコン, そのようです;

デモUnicode

フォントのサブセット化

コレクション内のアイコンがすべて必要とは限りません。その場合は、フォントをサブセット化して未使用の文字を削除することもできます。 フォントファイルのサイズが小さくなる. 幸い、この作業を簡単に行うためのFontSquirrelの便利なツールがあります。@ font-face generator.

そのページに移動してフォントを追加したら、を選択します。 エキスパート. もう少しオプションがあります。選択する カスタムサブセット.

この例では、Sociolicoフォントを使用してWebサイトにソーシャルメディアのアイコンを表示していますが、必要なアイコンはDribble、Facebook、およびTwitterのみであり、それぞれこれらの文字で表されています。 d、f そしてトン. そのため、これらの文字を次のように[単一文字]入力フィールドに入力します。

そしてこれで終わりです。今、私たちはフォントをダウンロードすることができますそして私の場合フォントサイズはたった3Kbから5Kbであることが判明しました。その唯一の文字は アイコンにレンダリングされるのはd、f、tだけです, 他の文字は通常の文字にしかならない.

最終的な考え

この方法ではできないことの1つは、アイコンにこのような非常に詳細な効果を追加することです。.

しかし、私たちの全体的なデザインがそのレベルの詳細を必要としない場合、このアプローチはウェブサイトでアイコンを提供するためのより良い方法になるかもしれません。それは、柔軟性、スケーラビリティを持ち、非常に小さいファイルサイズで網膜に対応しています。?

最後に、このトピックについてもっと深く知りたいのであれば、以下にデモ用のソースコードとダウンロード用の便利なリファレンスをいくつかまとめました。.

あなた自身のアイコンをWebfontにする方法 - WebDesignerDepot.com
フォントとデータ属性の表示 - 24Ways
私用Unicode - Wikipedia

デモ
ソースをダウンロード