Font Awesomeのアイコンをul,li
のリストに毎回付けるのが面倒だったのでCSSに埋め込んでみました。
<i class="fa fa-check-square"></i>
これを使わなくていいようになります。
- あいうえお
- かきくけこ
CSSの:brforeを使って埋め込みます
html
li
の後に<i class="fa fa-check-square"></i>
を入れなくていいようになります。
スッキリしていいですねー
<ul class="list-check-square"> <li>あいうえお</li> <li>かきくけこ</li> </ul>
CSS
アイコンはfont-awesome.cssでコードを選んでください。今回使用したい は\f14a
だったのでcontent:
に設定します。content: "\f14a";
フォントにFont Awesomeを記述。font-family: FontAwesome;
ul.list-check-square li{ list-style-type:none; } ul.list-check-square li:before{ content: "\f14a"; font-family: FontAwesome; padding-right:0.3em; }
これでOK!