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

ブロック要素にテキストでアイコンを上下左右の指定位置に表示する方法を紹介します。アイコンは疑似要素で表示します。

HTML

補足

• span 要素にデータ属性（data-icon-left, data-icon-right, data-icon-top, data-icon-bottom）を付けてアイコンの表示位置と表示するテキストを指定します（span 要素はCSS でブロック要素化しています）。

CSS

サンプル

「ブロック要素にテキストでアイコンを表示」のサンプル

関連記事

• 文字列中にテキストでアイコンを表示