ブロック要素に画像を使ってアイコンを表示する方法を紹介します。アイコンは疑似要素の背景画像で表示しています。
HTML
補足
- アイコンの位置を data 属性（data-icon-pos）で指定します。
- 表示するアイコンの種類は data 属性（data-icon）で指定します。
CSS
補足
- アイコンは疑似要素の背景画像で表示しています。
- サンプルではサイズが 64px × 64px の画像を 24px × 24px のブロック要素の背景として表示しています。
- アイコンのサイズを変更する時は span 要素の padding や疑似要素の表示位置を調整する必要があります。