スタイルシートでアイコンを作る

概要

丸いアイコンの中に文字が入ったアイコンを、スタイルシートで作ります。

こんなの↓

サンプルコード

下記のリンク（CodePen）をご覧ください。

Just a moment...

codepen.io

ポイント

丸くする

• widthとheightを揃える
• border-radius: 50%

文字の上下中央寄せ

• vertical-align: middle
• vertical-alignを適用するため、親要素はdisplay: table、自身はdisplay: table-cell

参考

hacknote.jp

www.granfairs.com