CSS スプライト画像を使ってアイコンを表示する方法を紹介します。Retina ディスプレイでアイコンがボケないよう、倍の大きさのアイコンを縮小表示しています。
HTML
補足
- span 要素の data-icon-pos 属性でアイコンを表示する位置を指定します。
- 同じく、span 要素の data-icon 属性でアイコンの種類を指定します。
- span 要素は CSS でブロック要素化しています。
CSS
補足
- アイコンは span 要素の before 疑似要素の背景として表示しています。
- このサンプルでは 48px × 48px のアイコンが 24px × 24px で表示されるようにしています。
- data-icon-pos 属性で指定される top、 left、 botton、right 毎に、それぞれの余白や疑似要素の表示位置を指定しています。
- data-icon 属性では表示するアイコンの CSS スプライト画像上の位置を指定しています（ background-size で実際の半分の大きさを指定しているので、ここで指定する位置座標も半分になる）。
- このサンプルで使用する CSS スプライト画像は 192px × 192px の PNG ファイルです。
- Retina 対応とするため、CSS スプライト画像は、下のような大きさレイアウトで作成しています（実際の画像は透明の背景に白地のアイコンのみ。それ以外は説明用です）。
