@ font-faceを使用すると、PNGやGIFの形式ではないアイコン（アイコン）をアップロードできますが、フォント内に埋め込み、@ font-faceディレクティブを使用してユーザーを読み込むことができます。 CSS3を使用すると、このようなアイコンを回転したり、影を追加したり、マウスをホバーしたときに滑らかな色の変化を伴うアニメーション効果を追加したりできます（以前はFlashでのみ可能でした）。



以下は、IconPackフォントセット（.eot、.woff、.ttf、.svg）を使用し、 :before



擬似要素とspan



タグを使用してアイコンを読み込むための手順です。

 <style> .staricon { font-family: 'IconPack'; } .staricon:before { content: 'a'; } .show { display:block; } .hide { display:none; } </style> <div class="staricon"> <span class="show">star</span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

考えてみると、この方法には多くの利点があり、欠点にもかかわらず、サイトにアイコンを表示するデフォルトの方法として推奨できます。

メリット

潜在的にはるかに少ないHTTP要求

数百の小さな写真をダウンロードすると、1つの大きなファイルよりもはるかに時間がかかる場合があります。 場合によっては、これによりページの読み込みが速くなる可能性があります（Finom habrayuzerがコメントに正しく記載されているため、スプライトがこれに使用されます）。



単一のアイコン、無限のサイズ。

ベクトルアイコンはスケーリングを意味します。 icon_8x8.png、icon_16x16.png、icon_24x24.pngなどを忘れてください。



より明確なアイコン管理システム

誰もがさまざまなサイズと色の選択肢を持っているアイコン管理は、深刻な頭痛の種になる可能性があります。 フォントでは、すべての色/サイズが1つのファイルに含まれています。



アイコンをCSSの1行に置き換える

TypeKitについてのすべての話と、フォントを埋め込むのがいかに簡単かは、将来同じ方法でアイコンに切り替えることができます。



CSS3特殊効果

前述のアニメーション効果、スムーズなホバーカラーシフト、その他の効果は、Webデザインの興味深い手法です。

短所

フォントは大きくすることができます

90 KBでは、複雑なフォントを簡単に超えることができます。 特定のアイコンが必要な場合、このサイズを正当化するのは困難です。



標準なし

TypeKitが埋め込みフォントを提供するようにアイコンセットを開発および販売する必要があると仮定した場合、セット内のアイコンの標準文字セットを作成し、各アイコンに安定したシリアル番号を割り当てる必要があります。 そうしないと、現在のフォントのように、アイコンのセットを簡単に変更できません。



リスクがデザインを台無しにする

フォントのアイコンを使用した実験では、この手法を誤用するとデザインが簡単に台無しになることがわかります。



マルチカラーのアイコンが機能しない

多色のアイコン （たとえば、国旗）を実装する場合、がっかりします。CSS3では、単純なグラデーションのみを使用できますが、それ以外は使用できません。



すべてのブラウザがサポートしているわけではありません

ユーザーのブラウザがフォントのダウンロードを強制的に禁止し、組み込みフォントのみを使用している場合、ユーザーにはアイコンがまったく表示されません。



srd経由