アイコンの作り方（画像タイプ）

「アイコンと画像の見極め方」で説明したように、アイコンは「文字や文章の飾り」という意味からも文章の一部（コンテンツ）ではなく、デザインという考え方なので、CSS側で作成するのが効率的です。
作り方は、「特定の領域に壁紙を作る為の背景画像」を使用して作成するのがデザインもレイアウトもコントロールしやすく、応用範囲が広がり、自由度が高まるのでお勧めです。

１．アイコンは背景画像で作る

今回はli要素内のa要素に対してアイコンを埋め込む方法です

まず、アイコンを作成したいセレクタに「background-image」を使って背景画像を埋め込みます。
するとその領域すべてに画像が埋め込まれます。（壁紙機能）

下記のソースコードは前もってa要素をある程度デザインしています。

２．繰り返し機能を停止する

アイコンは画像1個ですので、何度も繰り返すのを止める為、「background-repeat: no-repeat;」を追記します。

３．アイコンの画像サイズを調整する

使用する画像の大きさは原版のままですので、文字の大きさやレイアウトを考え、画像サイズを「background-size」を使用して調整します。

４．文字を右にずらす（アイコン領域を確保する）

上記の設定をすると画像と文字が重なってしまいます。
この原因は、壁紙の画像は領域の左上から始まり、文字も何も指定しなければ左上から始まります。
どちらも開始位置が同じなので被ってしまうのですね。

そこで、文字を右にずらすため、画像の大きさより少し大きめに「padding-left」を追記します。

５．領域の高さを調整する

領域の高さが足りない時は「line-height」でBOXの高さを調整しましょう。
※「line-height」を使うと、文字は常に上下中央に来ますので、余分なCSSを追記する必要が無くなります。

６．アイコン画像の位置調整をする

アイコンの位置調整を行いたい時は「background-position」を使って上下左右の位置を調整しましょう。
「background-position」には様々な設定方法がありますが、今回は微調整をしたいので単位は「px」としました。
【参考サイト】
background-position－スタイルシートリファレンス

今回は、y軸（縦方向）を指定しておりません。

x軸（横方向）のみ記述し、y軸（縦方向）を記述しなければ、CSS側が勝手に上下のセンタリングを行ってくれる便利な機能を使ってます。