アイコンフォントを使って li
要素の list-style
をカッコよくします。
li要素の list-style
でアイコンフォントを一覧の頭に表示するには、以下のように擬似要素を使ってできます。
この例では Material Icons
アイコンフォントを使っています。
ul { list-style: none; li { &:before { font-family: 'Material Icons' sans-serif; content: 'check_circle'; } }
font-family
と content
を指定して <i class="material-icons">check_circle</i>
と同じように表示させられました。
でもこうすると、改行のときに文字がアイコンの左側に行ってしまいます。
ささいなことですが、こういうところを手抜きすると一気にダサくなるので調子したいです。
以下のように li
要素にスタイルを追加するとうまくインデントします。
ul { list-style: none; li { text-indent: -1em; padding-left: 1em; &:before { font-family: 'Material Icons' sans-serif; content: 'check_circle'; } }
キレイにまとまりました。 やったー。