ishii-akihiro’s blog

いろいろ試したことやバグ対応の作業履歴を残していきます。

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

概要

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

こんなの↓

f:id:ishii-akihiro:20181007121206p:plain

サンプルコード

下記のリンク(CodePen)をご覧ください。

https://codepen.io/akihiroishii/pen/NOREod

ポイント

丸くする

  • widthheightを揃える
  • border-radius: 50%

文字の上下中央寄せ

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

参考

hacknote.jp

www.granfairs.com