html - ベクトル アイコン イメージのアイコンを使用する

Question

それらは、インターネット上で利用可能な多くのアイコン画像です。これをダウンロードしたばかりですが、問題は使い方がわからないことです。このトピックに関するチュートリアルを探していますが、役立つものが見つかりません。これらのアイコンの使い方を知っている人はいますか?

Answer 1

アイコンに画像を使用することについて話している場合sprite（ただし、表示された画像はスプライトの作成方法の良い例ではありません... ;）

次に、こちらをご覧ください: http://jsfiddle.net/sWZrh/

基本的に、1 つbackground-imageをすべてのアイコンになるように設定してから、次のように再配置します。background-position

Answer 2

通常、アイコンの作成者が指示を提供します。アイコンの使用方法は、その形式によって異なります。最近アイコンを提供する最も一般的な方法は、Web フォントとしてのようです。良い例はsymbolsetです。

.ai や .eps 形式などのベクターしかない場合は、Adobe Illustrator などのベクター エディターを使用して SVG にエクスポートできます。悲しいことに、SVG のサポートは Web フォントほど良くありません。より良いオプションは、Web フォントを自分で作成することです。利用可能なオプションはいくつかあります。私はアプリケーションGlyphsで成功しましたが、時間がかかる場合があります。

最終的に Web フォントになった場合は、まずフォントを含め、それを使用するようにターゲット要素を設定する必要があります。次に、正しい文字を参照してアイコンを挿入します。結果が SVG 画像の場合は、imgタグを使用して挿入できます。