noseblog

menu

2019.5.11

擬似要素を使ってテキストの横にアイコンを表示する方法[コピペok]

メニューなどでテキストの横にアイコンを並べるデザインは非常に多くのwebサイトに使用されているかと思います。

今回はafterやbeforeなどの擬似要素を使って、タグにクラスicon-rightやimgIcon-rightをつけるだけでテキストの横にアイコンを並べるデザインを簡単に実装できるcssをメモします。

なぜ擬似要素を使うかというと、擬似要素を使うことでdivタグの個数を一つ減らすことができ、コードが綺麗になるからです。

では見ていきましょう。

webアイコンフォントを使う

fontawesomeなどのwebアイコンフォントを使う場合は以下のようなコードになります。

See the Pen
qGNBKb by Yuta (@nose_free)
on CodePen.

top、left、rightの値を変更することで位置を調節できます。

また、font-sizeを変更することでwebアイコンフォントの大きさを調節できます。

画像アイコンを使う

画像のアイコンを使う場合は以下のようなコードになります。

See the Pen
QREwQL by Yuta (@nose_free)
on CodePen.

top、left、rightの値を変更することで位置を調節できます。

また、width、heightを変更することでwebアイコンフォントの大きさを調節できます。

今回は以上です。