Font AwesomeのアイコンをCSSに埋め込む方法

Font Awesomeのアイコンをul,liのリストに毎回付けるのが面倒だったのでCSSに埋め込んでみました。

Font Awesome 4

Font Awesome 4

　<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！

Font Awesome 5

Font Awesome

  • あいうえお
  • かきくけこ

最新バージョンだとfont-family: FontAwesome;では表示できなくなりました。
無料で利用できる「Free」フォントを利用する場合、
6行目font-family:"Font Awesome 5 Free";
8行目font-weightのフォントサイズを記述するようにしてください。

ul.list-check-square li{
  list-style-type:none;
}
ul.list-check-square li:before{
  content: "\f14a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right:0.3rem;
}
　<i class="fa fa-check-square"></i>

　<i class="fas fa-check-square"></i>
　<i class="far fa-check-square"></i>
Style font-weight
Solid Style fas 900
Regular Style far 400

content:はどちらも\f14aなのでfont-weightを設定するようにしてください。

関連記事