ブロック要素にアイコンバッジを表示

ブロック要素にアイコンバッジを表示する方法を紹介します。

HTML

補足

• データ属性（data-badge-top-left, data-badge-top-right, data-badge-bottom-left, data-badge-botton-right）で、バッジの位置と表示する文字を指定します。

CSS

サンプル

「ブロック要素にアイコンバッジを表示」のサンプル

関連記事

• ブロック要素にテキストでアイコンを表示

ブロック要素に画像でアイコンを表示

ブロック要素に画像を使ってアイコンを表示する方法を紹介します。アイコンは疑似要素の背景画像で表示しています。

HTML

補足

• アイコンの位置を data 属性（data-icon-pos）で指定します。
• 表示するアイコンの種類は data 属性（data-icon）で指定します。

CSS

補足

• アイコンは疑似要素の背景画像で表示しています。
• サンプルではサイズが 64px × 64px の画像を 24px × 24px のブロック要素の背景として表示しています。
• アイコンのサイズを変更する時は span 要素の padding や疑似要素の表示位置を調整する必要があります。

サンプル

「ブロック要素に画像でアイコンを表示」のサンプル

関連記事

• ブロック要素にテキストでアイコンを表示

ファビコンとホーム画面用のアイコン

ブラウザのタブやお気に入りのリストにアイコンが表示されるよう、head 内に、以下の３行を指定しています（３行目はスマートフォンやタブレットのホーム画面に追加した時に表示されるアイコン用）。

HTML

補足

• アイコンは "favicon.ico" と "apple-touch-icon.png" の２種類用意します。
• "favicon.ico" は 16×16px 、32×32px、48×48px の３つのサイズを含むマルチアイコンです。
• "apple-touch-icon.png" は 152×152px の PNG 形式の画像ファイルです。
• 必要なアイコンのサイズはブラウザや OS によって異なり、上記サイズでない場合、適当に拡大・縮小表示されるようです。そのため、アイコンの絵柄によっては、きれいに表示されない場合があります。