アイコンの作り方(画像タイプ)

アイコンと画像の見極め方」で説明したように、「アイコンは文字や文章の飾り」という捉え方をしますので、CSS側で作成するべきです。
この時、特定の領域に壁紙を作る為の背景画像を使用して作成するのがデザインもレイアウトもコントロールしやすく、応用範囲が広く、自由度が高まるのでお勧めです。

1.アイコンは背景画像で作る

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

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

【htmlのソースコード】

【cssのソースコード】

 

【表示サンプル】

2.繰り返し機能を停止する

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

【cssのソースコード】

【表示サンプル】

3.アイコンの画像サイズを調整する

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

【cssのソースコード】

【表示サンプル】

4.文字を右にずらす(アイコン領域を確保する)

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

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

【cssのソースコード】

【表示サンプル】

5.領域の高さを調整する

領域の高さが足りない時は「line-height」でBOXの高さを調整しましょう。

【cssのソースコード】

【表示サンプル】

6.アイコン画像の位置調整をする

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

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

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

【cssのソースコード】

【表示サンプル】