2015/08/23　 2017/06/21　 CSS　

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！

関連記事