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

文字列の途中（先頭または末尾も可）に、テキストでアイコンを表示する方法を紹介します。サンプルでは記号文字 "★" をアイコンとして表示しています。

HTML

補足

• アイコンとして表示したいテキストを span タグで挟み、inline-text-icon クラスを付けます。

CSS

補足

• inline-text-icon クラスでは span 要素をインライン・ブロック化したあと、アイコンとしての装飾を設定しています。

サンプル

「文字列中にテキストでアイコンを表示」のサンプル